jQuery：检测鼠标何时离开多个元素

Question

我有一个由divs制成的菜单，其中一个Divs具有一个jQuery Mouseenter函数，可以向下滑动下拉：

$(".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>

Answer 1

好吧，这种方式是很大程度上的...打开任何菜单（例如您的浏览器菜单），然后移动鼠标 - 它不是隐藏的。这是正常的方式。单击某个地方时，菜单被隐藏了（因此您可以将单击事件处理程序附加到文档中）。即使您进入子菜单，它也会在鼠标结束时显示，并且当您将鼠标移至另一个菜单项时被隐藏；但是，当您将鼠标从菜单中移出时，子菜单不会被隐藏。

如果您仍然想实现自己的想法，则需要实现复杂的系统来控制用户操作。将Mouseleave处理程序添加到下拉launcher，注册该用户离开此项目并触发下拉菜单隐藏。现在，隐藏下拉菜单的功能中，检查鼠标是否超过下拉菜单 - 取消隐藏；否则隐藏它。不要忘记清洁该变量的状态（“左下拉launcher”）。例如，在用户左发射器后，您可以执行下拉菜单在1秒内隐藏。

另外，请注意，当用户将鼠标快速移动（只是混蛋）时，浏览器没有时间触发某些事件（我对Mousemove遇到问题）...请确保您测试此情况。

好吧，没有任何代码，但我希望您明白。

更新： 可能您不再对这个问题不感兴趣（答案来得太晚了，所以我理解；），但是我发现了非常有趣的解决方案，易于支持：

单击示例页面

打开该页面，有菜单。正如我所得到的那样，这就是您要实现的目标（我的意思是菜单导航的行为相同）。在查看JavaScript代码后，我注意到它很小，甚至与该菜单无关……因此，对我来说很明显，他们使用纯HTML+CSS执行它。只是看一个小 CSS文件, ，还要查看和菜单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完成的（特别是：悬停伪级）。我喜欢这种方法。因此，至少您有其他选择；）