CODEWITHSUNDEEP
javascriptphpajaxhover
Pattatharasu Nataraj
Pattatharasu Nataraj

Reputation: 248

javascript hover dynamic fails

hai iam trying to place hover in an dynamic image have to show a dynamic div, if remove mouse div has to be hidden, if i over to the div after hover on image div needs to remain visible if i move out from the div it has to be hidden i tried something like this, but not working as expected, If i over to image div appears if i place mouseout tag there it hides the div once i remove the mouse couldn't use the options in the div, if i place the mouse out in div once i remove the mouse from image the div not closing, sorry for bad english as solutions for this case?

  function GoView_respond(id){
      console.log('hovering');
      document.getElementById("pending_req_"+id).style.display="block";
    }

     var cl=0;

  function ExitView_respond(id){
     console.log('not hovering');
    if(cl!=1){
     document.getElementById("pending_req_"+id).style.display="none";
    }
 }
<a onmouseover="GoView_respond('1');" onmouseout="ExitView_respond_one('1');">over_here</a>
          <div class="respond_request" style="display:none;" id="pending_req_1" >
                <p class="user_details" onmouseout="ExitView_respond('1');">asdfasdfasfsdffsadfsadfasf</p>
          </div>

Upvotes: 0

Views: 32

Answers (1)

S A M
S A M

Reputation: 151

Below code may help to solve your problem:

Javascript code:

    function GoView_respond(id){
      console.log('hovering');
      document.getElementById("pending_req_"+id).style.display="block";
      cl = 1;
    }

     var cl=0;

  function ExitView_respond(id){
     console.log('not hovering');
    if(cl!=1){
     cl=0;
      document.getElementById("pending_req_"+id).style.display="none";
    }
 }

function GoView_respond_one(id) {

    setTimeout(function() {
      if(cl == 1) {
         cl = 0;
        document.getElementById("pending_req_"+id).style.display="none";
      }
    }, 2000);
  }
}

And Html code as below

<a onmouseover="GoView_respond('1');" onmouseout="GoView_respond_one('1');">over_here</a>
          <div class="respond_request" style="display:none;" id="pending_req_1" >
                <p class="user_details" onmouseover="GoView_respond('1');" onmouseout="ExitView_respond('1');">asdfasdfasfsdffsadfsadfasf</p>
          </div>

Demo Link for your reference.

Upvotes: 1

Related Questions