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);
});