javascript 如何一次检测两个元素上的 mouseleave()？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5018749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect mouseleave() on two elements at once?
提问by Lil Timmy O'Tool
Answer can be in vanilla js or jQuery. I want to hide a div with the id "myDiv" if the user is no longer hovering over a link with the id "myLink" or a span with the id "mySpan". If the user has his mouse over either element "myDiv" will still show, but the second the user is not hover over either of the two (doesn't matter which element the user's mouse leaves first) "myDiv" will disappear from the face of existence.
答案可以是 vanilla js 或 jQuery。如果用户不再悬停在 ID 为“myLink”的链接或 ID 为“mySpan”的跨度上，我想隐藏 ID 为“myDiv”的 div。如果用户将鼠标悬停在任何一个元素上，“myDiv”仍会显示，但第二个用户没有将鼠标悬停在两个元素上（用户鼠标先离开哪个元素无关紧要）“myDiv”将从面部消失的存在。
In other words this is how I detect mouse leave on one element:
换句话说，这就是我在一个元素上检测鼠标离开的方式：
$('#someElement').mouseleave(function() {
// do something
});
but how to say (in a way that will actually work):
但是怎么说（以实际可行的方式）：
$('#someElement').mouseleave() || $('#someOtherElement').mouseleave()) {
// do something
});
How to detect this?
如何检测这个？
采纳答案by Frédéric Hamidi
You could use a multiple selector:
您可以使用多重选择器：
$("#someElement, #someOtherElement").mouseleave(function() {
// Do something.
});
回答by lonesomeday
回答by Hendrik
While the answer from lonesomeday is perfectly valid I changed my html to have both elements in one container. I originally wanted to avoid this hence I had to do more refactoring for my clients in other html templates, but I think it will pay out on the long term.
虽然 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"); });
回答by Julius S.
You can beautifully use setTimeout()to give the mouseleave()function some "tolerance", that means if you leave the divs but re-enter one of them within a given period of time, it does not trigger the hide()function.
你可以漂亮地使用setTimeout()给mouseleave()函数一些“容忍”，这意味着如果你离开 div 但在给定的时间内重新进入其中一个，它不会触发该hide()函数。
Here is the code (added to lonesomeday's answer):
这是代码（添加到lonesomeday的答案中）：
var count = 0;
var tolerance = 500;
$('#d1, #d2').mouseenter(function(){
count++;
$('#d3').show();
}).mouseleave(function(){
count--;
setTimeout(function () {
if (!count) {
$('#d3').hide();
}
}, tolerance);
});
回答by Davide Puddu
I think, it's your solution!!!
我想，这就是你的解决方案！！！
$(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>
