javascript hover on dynamic function not working

Question

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?

<img onmouseover="GoView_respond(<?php echo $print->Friend_id;?>);" onmouseout="ExitView_respond_one(<?php echo $print->Friend_id;?>);">
          <div class="respond_request" style="display:none;" id="pending_req_<?php echo $print->Friend_id;?>" >
                <p class="user_details" onmouseout="ExitView_respond(<?php echo $print->Friend_id;?>);">
          </div>


<script>
  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";
    }
 }
 </script>

score 2 · Answer 1 · answered Nov 18 '17 at 15:22

Well, there are various ways to achieve this. You could for example trick by setting a little timeout that will allow the mouse to reach the user details html node and vice-versa.

Let me be more explicit, according to your case

<?php
class Friend
{
    public $Friend_id;
    public $Friend_details;
    public $Friend_image;
    public function __construct($id, $details, $image){
        $this->Friend_id = $id;
        $this->Friend_details = $details;
        $this->Friend_image = $image;
    }
}
$print = new Friend(1, 'The very first user', 'http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
?>
<img class="user_image" id="user_image_<?php echo $print->Friend_id; ?>" src="<?php echo $print->Friend_image; ?>" alt="some image" />
<div class="user_details" id="user_details_<?php echo $print->Friend_id; ?>">
    <h5>User details</h5>
    <?php echo $print->Friend_details; ?>
</div>
<style>
.user_details {
    display: none;
    background-color: lightgray;
    width: 250px;
    padding: 15px;
}
</style>

<script>
var userImages = document.getElementsByClassName('user_image');

for(var i = 0; i < userImages.length; i++){
    var
        userImage = userImages[i],
        userId = userImage.id.replace('user_image_', ''),
        thisUserDetails = document.getElementById('user_details_' + userId),
        mouseOutTimeout = 100, // Here is the trick
        mouseTimer = null; // Needed in order to hide the details after that little timeout

    userImage.addEventListener('mouseout', function(){
        mouseTimer = setTimeout(function(){
            thisUserDetails.style.display = 'none';
        }, mouseOutTimeout);
    });

    userImage.addEventListener('mouseover', function(){
        clearTimeout(mouseTimer);
        thisUserDetails.style.display = 'block';
    });

    thisUserDetails.addEventListener('mouseout', function(){
        var _this = this;
        mouseTimer = setTimeout(function(){
            _this.style.display = 'none';
        }, mouseOutTimeout);
    });

    thisUserDetails.addEventListener('mouseover', function(){
        clearTimeout(mouseTimer);
    });
}
</script>

Note: I've used getElementsByClassName and addEventListener here, that are not compatible with IE8 and earlier. Check this link for getElementsByClassName compatibility and this one for addEventListener.

Hope it help.

javascript hover on dynamic function not working

1 Answers1