jQuery在mouseout上隐藏div [英] jQuery hide div on mouseout

问题描述

我在这个项目上看到很多帖子，但找不到合适的解决方案。

我想要的是什么：
我有一个 DIV 与我的菜单项相关联，当点击事件触发 href 元素时打开。
现在我想隐藏菜单，当鼠标不在 DIV 元素中，并且不在 href 元素。到目前为止，我只能在单击 href 元素时关闭它。

所以，我的jQuery看起来像这样：

$ b $

  $（＃menu_opener）。click（function（）{
 if（$（＃menudiv ）.is（：hidden））{
 $（＃menudiv）。slideDown（slow）; 
} else {
 $（＃menudiv）。hide （）; 
} 
}）; 
  

我的HTML看起来像这样：

 < DIV> 
< a href =＃id =menu_opener>菜单< / a> 
< / div> 
< div id =menudivstyle =position：fixed; background-color：white; display：none;> 
< a href =＃id =A1>第1页< / a>< br /> 
< a href =＃id =A2>第2页< / a>< br /> 
< a href =＃id =A3>第3页< / a>< br /> 
< / div> 
  

提前致谢！

解决方案

您可以保留HTML，只需添加以下内容：

  $（＃menudiv ）.mouseleave（function（）{
 $（this）.hide（）; 
}）; 
  

jsFiddle： http://jsfiddle.net/5SSDz/

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 DIV with my menu items, that opens when the click event is fired of an href element. Now I wanna hide the menu, when the mouse is out of the DIV element and is not above the href element. So far I can only close it when I click the href element.

So, my jQuery looks like this:

$("#menu_opener").click(function () {
            if ($("#menudiv").is(":hidden")) {
                $("#menudiv").slideDown("slow");
            } else {
                $("#menudiv").hide();
            }
        });     

And my HTML looks like this:

<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!

解决方案

You can keep the HTML as is and simply add the following:

$("#menudiv").mouseleave(function(){
    $(this).hide();
});

jsFiddle: http://jsfiddle.net/5SSDz/

这篇关于jQuery在mouseout上隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！