jQuery：鼠标移动到一个div上时打开子菜单，当鼠标移出时子菜单应该保持打开状态

Question

我已经搜索过了，但是却没有找到一个匹配的问题.. o.O

现在，我有两个div，“div 1”和另一个隐藏的div（“子菜单”）。现在，如果我将鼠标悬停在div 1上面，子菜单就会出现在div旁边，这是正确的。但是，如果我将鼠标移到子菜单上面，它就会消失。

这是因为我在div 1上设置了hover触发器。

如果我将其分为mouson和mouseout，是否有可能说“当mouseout时submenu必须关闭，但仅当光标不在submenu上时”？

谢谢帮忙！

Flo

- Florian Müller

---

请查看以下答案：http://stackoverflow.com/questions/7006504/need-assistance-on-script-jquery/7048105#7048105 - Mikey G

@Mikey G，你说得对！这解决了我的问题！你可以写一个答案，这样我就可以标记它为正确的 :) - Florian Müller

Answer 1

这个技巧需要两个东西：

1. 一个包含初始菜单(div 1)和第二级菜单(submenu)的父div
2. 使用.mouseleave()方法，而不是.mouseout() -- 并将其绑定到＃1中提到的父div上

jsFiddle示例 你不想使用mouseout()，因为一旦光标移到第二个菜单上，它就会立即触发，因为这实际上会“阻止”它停留在父div上。相反，mouseleave()仅在光标不再位于父div或其任何子元素之上时才会触发。

- maxedison

---

好的，我刚刚通过在父级div事件上使用“hover”来解决了它，这对我也很有效...我并不是真正意思是mouseout，我只是不知道确切的名称，但我希望你们都能理解我的意思^^但还是谢谢！ - Florian Müller

是的，那是一个更好的解决方案。.hover()使用mouseenter()和mouseleave()，而不是mouseover()和mouseout()，这非常重要，正如我在我的回答中所解释的那样。 - maxedison

Answer 2

如果您不想要动画效果，可以使用:hover选择器来实现，就像this一样，无需JavaScript。

- Spycho