如何一次檢測兩個元素上的mouseleave（）？

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

您可以使用多重選擇器 ：

$("#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()函數一些“容差”，這意味着如果你離開div但在給定的時間內重新輸入其中一個，它就不會觸發hide()函數。

這是代碼（添加到lonesomeday的答案）：

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>