jQuery - How to detect mouse is not over #a and #b

Question

Html code

<div id="a"></div>
<div id="b"></div>
<div id="box"></div>

How can i check if the mouse is not over #a & #b and then run the function

$("#a").mouseleave(function () {
$("#box").fadeOut(800));
});

Answer 1

You need to keep a "cache" of whether the mouse is in A or B, and finally you need to check whether both are in the "out" state and then run your fadeOut function. A word of warning, allow the user a few milliseconds to transition from one to the next, otherwise you'll find it doesnt work as expected.

This code should do it, with a live example here: http://jsfiddle.net/jzCjD/

var inArr = {a:false,b:false};

$('#a, #b').mouseover(function(){
    inArr [$(this).attr('id')] = true;
});


$('#a, #b').mouseout(function(){
    inArr [$(this).attr('id')] = false;

    setTimeout(function(){ 
          if(!inArr.a && !inArr.b) 
              $('#box').fadeOut(800) 
    },100);
});