Question

I’m not sure if this is a limitation of the jquery function or a bug on my code, but i can see the same behavior happening on the example at http://api.jquery.com/hover/

My implementation is that i have a pop up box that shows when the mouse is hovered over a product item, and the hidden when the mouse hovers out.

The issue is when the mouse is hovered and the pop up box shows, if I scroll down/up the page with the mousewheel/trackpad, while the mouse cursor is not on the product item anymore due to the scrolling, the hover-out behavior is not detected, and the pop up box remains in sight, remaining in the middle of the screen since its position is determined during the hover event, relative to the product’s position on the screen.

Does this make sense ? Can anyone help ?

Answer 1

This is a somewhat intrusive solution, but it should work:

// The normal hover handler
$("#productElement").hover(function(){
  $("#otherElement").show();
},function(){
  $("#otherElement").hide();
});

// A global scroll handler that hides an specific
// element whenever the user scrolls.
$(document).scroll(function(){
  $("#otherElement").hide();
});

In the above code, #productElement would be the label that the user hovers to, and #otherElement would be the dialog that pops up on hover. That is just the basics of how it would work; you would adapt it to your code.