Checking if mouse is over something in jQuery?

Question

I have found that all the other people who have asked this in the past were told to use :hover, but that doesn't exist anymore. Is there a way to get a boolean out of .hover()?

I'm currently using .hover() in order to make a div appear when I mouseover a button, and then it disappears when I mouseout. However, I would like to add a check, so that the div won't disappear unless the mouse is not over the button AND the mouse is out of the div.

`:hover` exists, in CSS, where you could do this without any javascript at all as long as you structure your markup correctly. — adeneo, Jul 03 '13 at 17:59
my mistake - apparently it didn't. i was referring to the edit to the response on this question, "This ':hover' selector was removed with the .hover() method in jQuery 1.9.x." http://stackoverflow.com/questions/8981463/detect-if-hovering-over-element-with-jquery — user2223066, Jul 03 '13 at 20:57

score 3 · Accepted Answer · answered Jul 03 '13 at 17:54

Something like this should work...

var $in_div = 0;

$("div").mouseenter( function(){
   $in_div = 1;
}).mouseleave( function(){
   $in_div = 0;
});

$("button").mouseenter( function(){
    $("div").show();
}).mouseleave( function(){
    if ( $in_div == 1 ) { $("div").hide() }
});

This is another method that I usually use, by delaying the hide by 500ms, we can interrupt it if we want (in this case, if the user leaves the button but enters the div).

var $delay = 0;
$("button").mouseenter( function(){
    clearTimeout( $delay ); // don't hide
    $("div").show();
}).mouseleave( function(){
    $delay = setTimeout( function(){ $("div").hide() }, 500 );
});
$("div").mouseenter( function(){
    clearTimeout( $delay ); // don't hide
});

Checking if mouse is over something in jQuery?

1 Answers1