jQuery：鼠标悬停在div打开的子菜单上，当鼠标输出时它应该保持打开状态

Question

我已经搜索了，不知怎的，我找不到匹配的问题.. o.O

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

这是因为我在div 1上有一个悬停触发器。

如果我分成mouson和mouseout，是否有可能说'鼠标输出时必须关闭子菜单，但只有光标不在子菜单上'？

感谢您的帮助！

弗洛

Answer 1

这个技巧需要两件事：

1. 包装初始菜单（div 1）和第二个菜单（子菜单）的父div
2. 使用.mouseleave（）方法，而不是.mouseout（） - 并将其绑定到＃1
中提到的父div

jsFiddle example

你不想使用mouseout（），因为一旦光标越过第二个菜单，它就会激活，因为这实际上会“阻止”它超过父div。另一方面，mouseleave（）只有在光标不再超过父div或其任何子节点时才会触发。

Answer 2

如果你不想要动画，你可以在没有JavaScript的情况下使用：hover选择器，如this。