Question

答案可以是vanilla js或jQuery。如果用户不再悬停在ID为“myLink”的链接或ID为“mySpan”的范围内，我想隐藏ID为“myDiv”的div。如果用户将鼠标悬停在任一元素上，“myDiv”仍会显示，但第二个用户不会悬停在两者中的任何一个上（无论用户的鼠标首先离开哪个元素）“myDiv”将从脸部消失存在。

换句话说，这是我在一个元素上检测鼠标离开的方式：

$('#someElement').mouseleave(function() {

   // do something

});

但怎么说（以某种方式实际运作）：

$('#someElement').mouseleave() || $('#someOtherElement').mouseleave()) {

   // do something

});

如何检测？

Answer 1

这样的事情应该有效：

var count = 0;
$('#myLink, #mySpan').mouseenter(function(){
    count++;
    $('#myDiv').show();
}).mouseleave(function(){
    count--;
    if (!count) {
        $('#myDiv').hide();
    }
});

jsfiddle

Answer 2

您可以使用multiple selector：

$("#someElement, #someOtherElement").mouseleave(function() {
   // Do something.
});

Answer 3

虽然lonesomeday的答案完全有效，但我改变了我的html，将两个元素放在一个容器中。我原本想避免这种情况，因此我不得不在其他html模板中为我的客户做更多的重构，但我认为它会在长期内付出代价。

<div id="my-container">
 <div class="elem1">Foo</div>
 <div class="elem2">Bar</div>
</div>

$('#my-container').mouseleave(function() { console.log("left"); });

Answer 4

你可以精美地使用setTimeout()给mouseleave()函数一些＆＃34; tolerance＆＃34;，这意味着如果你离开div但是在给定的一段时间内重新输入其中一个时间，它不会触发hide()功能。

这是代码（添加到lonesomeday＆＃39;答案）：

var count = 0;
var tolerance = 500;
$('#d1, #d2').mouseenter(function(){
    count++;
    $('#d3').show();
}).mouseleave(function(){
    count--;
    setTimeout(function () {
        if (!count) {
            $('#d3').hide();
        }
    }, tolerance);
});

http://jsfiddle.net/pFTfm/195/

Answer 5

我想，这是你的解决方案!!!

$(document).ready(function() {
    var someOtherElement = "";
    $("#someElement").hover(function(){
        var someOtherElement = $(this).attr("href");
        $(someOtherElement).show();
    });
    $("#someElement").mouseleave(function(){
        var someOtherElement= $(this).attr("href");
        $(someOtherElement).mouseenter(function(){
        $(someOtherElement).show();
        });
        $(someOtherElement).mouseleave(function(){
        $(someOtherElement).hide();
        });

    });
});

----
html
----
<div id="someElement">
                <ul>
                  <li><a href="#tab1">element1</a></li>
                  <li><a href="#tab2">element2</a></li>
        </ul>       
</div>

<div id="tab1" style="display: none"> TAB1 </div>
<div id="tab2" style="display: none"> TAB1 </div>

如何一次检测两个元素上的mouseleave（）？

5 个答案: