Question

Html代码

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

如何检查鼠标是否未经过#a＆amp; #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);
});

Answer 2

像这样：

$("#a, #b").mouseout(function () {
   $("#box").fadeOut(800);

});

live demo

Answer 3

你可以在这里查看http://jsfiddle.net/XWRZF/2/

var myTimer = false;

$("#a ,#b").hover(function(){
    //mouse enter
    clearTimeout(myTimer);
},function(){
    //mouse leav
  myTimer = setTimeout(function(){
         $("#box").fadeOut(800);
    },100)
});

Answer 4

将它们包装在父div中，并用＃parent-div：

替换代码中的#a

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


$("#parent-div").mouseleave(function () {
    $("#box").fadeOut(800));
});

否则，如果您需要将div分开，则缓存解决方案应该可以正常工作。

Answer 5

mouseleave和mouseout事件仅在mouseover或mousein事件后触发，这实际上意味着为了检测光标是否在使用元素悬停这些事件，你必须首先将其悬停，以便触发事件正确的方法是将事件处理程序绑定到文档中的所有鼠标移动并检查事件的目标：

var elements = $('#a, #b');
$(document).mousemove(function(e){
    if(elements.get().indexOf(e.target) != -1)
        // you're over a or b
});

这样您就不必首先悬停元素以触发mouseout或mouseleave事件。
这是一个现场演示：

http://jsfiddle.net/gion_13/NLjjq/

Answer 6

如果您正在寻找简单的if语句。

if ( !$("#a, #b").is(":hover") ) {
    // not on it!
}

你当然还需要将这个绑定到某种类型的事件，你可以决定：

$(document).click(function(){
    //the snippet from above
});

jQuery - 如何检测鼠标还没有#a和#b

6 个答案:

http://jsfiddle.net/gion_13/NLjjq/