jQuery:在div开放子菜单上的Mousover,当mouseout时它应该保持打开状态

我已经搜索了,不知怎的,我找不到匹配的问题..哦

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

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

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

感谢帮助!

弗洛

诀窍需要两件事:

  1. 包含初始菜单(div 1)和第二个菜单(子菜单)的父div
  2. 使用.mouseleave()方法,而不是.mouseout() – 并将其绑定到#1中提到的父div

jsFiddle示例

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

如果你不想要动画,你可以在没有JavaScript的情况下使用:hover选择器这样做 。