jQuery 在鼠标悬停时隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6616407/
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
jQuery hide div on mouseout
提问by Jorelie
I saw a lot of posts on this item, but couldn't find the right solution. Sorry if it's already answered somewhere.
我看到很多关于这个项目的帖子，但找不到正确的解决方案。对不起，如果它已经在某处回答。
What I want:I have a DIVwith my menu items, that opens when the clickevent is fired of an hrefelement.
Now I wanna hide the menu, when the mouse is out of the DIVelement and is not above the hrefelement. So far I can only close it when I click the hrefelement.
我想要什么：我有一个DIV带有我的菜单项的菜单项，它会在元素click触发事件时打开href。现在我想隐藏菜单，当鼠标离开DIV元素并且不在href元素上方时。到目前为止，我只能在单击href元素时关闭它。
So, my jQuery looks like this:
所以，我的 jQuery 看起来像这样：
$("#menu_opener").click(function () {
if ($("#menudiv").is(":hidden")) {
$("#menudiv").slideDown("slow");
} else {
$("#menudiv").hide();
}
});
And my HTML looks like this:
我的 HTML 如下所示：
<div>
<a href="#" id="menu_opener">Menu</a>
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
<a href="#" id="A1">Page 1</a><br />
<a href="#" id="A2">Page 2</a><br />
<a href="#" id="A3">Page 3</a><br />
</div>
Thanks in advance!
提前致谢！
回答by NakedBrunch
You can keep the HTML as is and simply add the following:
您可以保持 HTML 不变，只需添加以下内容：
$("#menudiv").mouseleave(function(){
$(this).hide();
});
jsFiddle: http://jsfiddle.net/5SSDz/
jsFiddle：http: //jsfiddle.net/5SSDz/
回答by Marc Smith
if i understand the "is not above the href element" piece, you want the menu to stay visible when mousing off of div#menudiv, but still moused over a#menu_opener ??
如果我理解“不在 href 元素上方”这一部分，您希望在将鼠标移出 div#menudiv 时菜单保持可见，但仍将鼠标悬停在 a#menu_opener 上？
if that's the case, i'd wrap the entire thing in a unqiue div and target that. and use mouseleave over mouseout.
如果是这种情况，我会将整个内容包装在一个独特的 div 中并以此为目标。并在 mouseout 上使用 mouseleave。
http://api.jquery.com/mouseleave/
http://api.jquery.com/mouseleave/
so, your HTML becomes:
所以，你的 HTML 变成：
<div id="menu_container">
<div>
<a href="#" id="menu_opener">Menu</a>
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
<a href="#" id="A1">Page 1</a><br />
<a href="#" id="A2">Page 2</a><br />
<a href="#" id="A3">Page 3</a><br />
</div>
</div>
and your script would be something like:
你的脚本将是这样的：
$("#menu_opener").click(function () {
if ($("#menudiv").is(":hidden")) {
$("#menudiv").slideDown("slow");
} else {
$("#menudiv").hide();
}
});
$("#menu_container").mouseleave(function(){
$('#menudiv').hide();
});
回答by Saad Imran.
Edit: Sorry misread the question the first time. I had to do this a couple of times, and I always moved the menu a pixel up so that it would overlap the href element. And then show/hide the menu if the href OR href elements are being hovered.
编辑：对不起，第一次误读了这个问题。我不得不这样做几次，而且我总是将菜单向上移动一个像素，以便它与 href 元素重叠。如果悬停 href 或 href 元素，则显示/隐藏菜单。
$("#menu_opener, #menudiv").hover(
function(){
$("#menudiv").show();
},
function(){
$("#menudiv").hide();
}
);
And set the top property for the menudiv's style so it moves up and is overlapping the href.
并为 menudiv 的样式设置 top 属性，使其向上移动并与 href 重叠。
<div>
<a href="#" id="menu_opener">Menu</a>
</div>
<div id="menudiv" style="position: fixed; top: -1px; background-color: white; display: none;">
<a href="#" id="A1">Page 1</a><br />
<a href="#" id="A2">Page 2</a><br />
<a href="#" id="A3">Page 3</a><br />
</div>
