JQuery:检测鼠标何时离开多个元素

JQuery:检测鼠标何时离开多个元素,jquery,html,slidedown,slideup,Jquery,Html,Slidedown,Slideup,我有一个由div组成的菜单,其中一个div有一个JQuery mouseenter函数,可以从下拉列表中滑下: $(".dropdownLauncher").mouseenter(function() { $(".dropdown").slideDown("slow"); }); $(".dropdown").mouseleave(function() { $(".dropdown").slideUp("slow"); }); 我还有一个功能,可以在鼠标离开下拉列表时将下拉列表向上滑

我有一个由div组成的菜单,其中一个div有一个JQuery mouseenter函数,可以从下拉列表中滑下:

$(".dropdownLauncher").mouseenter(function() {
  $(".dropdown").slideDown("slow");
});
$(".dropdown").mouseleave(function() {
  $(".dropdown").slideUp("slow");
});
我还有一个功能,可以在鼠标离开下拉列表时将下拉列表向上滑动:

$(".dropdownLauncher").mouseenter(function() {
  $(".dropdown").slideDown("slow");
});
$(".dropdown").mouseleave(function() {
  $(".dropdown").slideUp("slow");
});
这将是好的,除了当用户将鼠标移到启动器上时,然后再次退出,而不通过下拉菜单,菜单将保持向下

是否可以检查鼠标是否位于任何一个div中

编辑1:标记:

<div class="menu">
                <div class="menuItem selectedItem">Home</div>
                <div class="menuItem unselectedItem leftBorder dropdownLauncher">About <img src="Arrow.gif"></div>
                <div class="dropdown">
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                </div>
                <div class="menuItem unselectedItem leftBorder">Visiting</div>
                <div class="menuItem unselectedItem leftBorder">Newsletters</div>
                <div class="menuItem unselectedItem leftBorder">Ecology</div>
            </div>

嗯,这条路有很多车。。。打开任何菜单,例如浏览器菜单,然后移动鼠标-它不会隐藏。这是正常的方式。当您单击某个位置时,菜单将隐藏,以便您可以将单击事件处理程序附加到文档。 即使在您进入子菜单时,当鼠标位于子菜单上方时,它也会显示,当您将鼠标移动到另一个菜单项时,它会隐藏;但当您将鼠标移出菜单时,子菜单不会隐藏

如果你仍然想实现你的想法,你需要实现复杂的系统来控制用户的行为。将mouseleave处理程序添加到dropdownLauncher,注册用户留下此项并触发下拉菜单隐藏。现在在隐藏下拉菜单的功能中检查鼠标是否在下拉菜单上-取消隐藏;否则就把它藏起来。别忘了清理变量left dropdownLauncher的状态。例如,您可以在用户离开启动器后1秒内执行下拉菜单隐藏

另外要小心,当用户快速移动鼠标时,浏览器并没有时间触发一些事件,我在mousemove中遇到了问题。。。一定要测试这个案例

嗯,没有附加代码,但我希望你能理解

更新:可能你对这个问题不再感兴趣了,答案来得这么晚,所以我理解;,但我发现了非常有趣的解决方案,易于支持:

打开那个页面,有菜单。我明白了,这就是你想要实现的,我指的是菜单导航的相同行为。在查看JavaScript代码后,我注意到它非常小,甚至与菜单无关。。。所以我很清楚,他们使用纯HTML+CSS来执行它。只需看一看small,还可以看一看菜单和html标记:

<div id="rootMenu" class="menustyle">
  <ul class="menubar">
      <li class="topitem">
        <a class="selected" href="_link_"><img border="0" src="/click-examples/assets/images/home.png" alt=" Home" class="link"> Home</a>
        <ul class="submenu">
           <li>
              <a title="BorderPage Java source" target="_blank" href="_link_">BorderPage Class</a>
           </li>
           <li>
              <a title="Page border HTML template" target="_blank" href="_link_">Border Template HTML</a>
            </li>
            ....
        </ul>
      </li>
      ....
   </ul>
   ....
</div>

其他一切都是由css完成的,特别是:hover伪类。我喜欢这种方法。所以现在你至少有了选择

给我们看一些标记。你可以将鼠标连接到一个包含的div,但如果不查看上下文,就很难知道。如果我尝试包含div,那么访问、新闻发布者和生态就会出现新的情况。这很烦人。9小时,无人接听你能提供更多的细节吗?为什么不直接使用.hover;?我确实用mouseIn和mouseOut设置解决了这个问题。div的数据。。。胡说八道。。。谢谢