JQuery: check if mouse is over item

Question

I work with the following scenario: I have a map of images with hot spots. When you hover over <area> in the image map, display <div class="info-panel"> . This div overlaps the <area> , so the div is hidden on mouseleave <div class="info-panel"> .

This basically works, but in an unusual case, for example, if you go ballistic and move the mouse too fast, the div remains. I think it can be in small cases when <area> and <div> intersect. I would not worry about this, only the client indicated this as a mistake.

The only reliable way I can fix this is to check the mouse move if the info window is displayed. If so, check to see if the mouse is currently located, if not, and then hide it. This ensures that the info window will never be visible if the mouse is not above it.

My question is: how to check if the current mouse position is above the info window? Whereas this is for an exception, not a rule, and I'm not sure Is the info window visible or not?

Answer 1

When you use a mouse with a timer that starts after 1 second, for example, it closes all windows.

When you hover over the mouse, be sure to delete this timer ... so that the timer is set only when the mouse is displayed.

Sort of:

 var timer; $(".window").mouseout(function(){ $(".window").hide(); // regular hide // run the same thing after 1 second // to catch windows that are still open timer = setTimeout(function(){ $(".window").hide(); // regular hide }, 1000); // 1 second }); // be sure to remove the timer when you mouseover $(".window").mouseover(function(){ clearTimeout(timer); // other stuff }); 

Answer 2

instead of mouseover try mouseenter and mouseleave as event handlers.

Answer 3

Try the following:

 function show_info (thelink,info_panel) { var timer; timer = setTimeout(function(){ $(info_panel).stop(true, true).fadeIn('normal'); }, 300); $(thelink).mouseout(function(){ clearTimeout(timer); }); } function hide_info (resim) { $(info_panel).stop(true, true).fadeOut('normal'); } 

And the html code should be:

 <a href="#" id="thelink" onmouseover="show_tipbox('#thelink','#info_panel');">The link</a> <div id="info_panel" onmouseout="hide_tipbox('#info_panel');">Info Panel Content</div>