jQuery - 如何检测鼠标不在 #a 和 #b 上

Question

HTML代码

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

如何检查鼠标是否不在#a & #b 上方，然后运行该函数

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

Answer 1

您需要保留鼠标处于 A 还是 B 状态的“缓存”，最后您需要检查两者是否都处于“out”状态，然后运行您的 fadeOut 函数。警告一句，允许用户几毫秒从一个转换到下一个，否则您会发现它无法按预期工作。

这段代码应该可以做到这一点，这里有一个实例: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);
});