包含绑定到同一事件的 div 和锚链接答案

【问题标题】：encasing div and anchor link binded to same event包含绑定到同一事件的 div 和锚链接
【发布时间】：2012-09-05 06:16:32
【问题描述】：

我无法弄清楚如何将 mouseout() 绑定到我的整个导航栏，包括链接。

当用户将鼠标悬停在#nav 中的链接上时，会显示一个子菜单。一切都很好。

当用户将鼠标悬停在整个#nav之外时，我想要做的是淡出该子菜单。

我的鼠标移出代码：

$('#nav').mouseout(function() {
  setTimeout(function() {
   //$('.sub-link').fadeOut();
  }, 2000);
});

当我将鼠标悬停在#nav 中的锚链接上时，我会看到子菜单。然后我猜 mouseout() 甚至会触发并且子菜单会淡出。无论如何，有没有 #nav 和其中的任何锚链接作为一个？

我会粘贴我的标记，但即使缩进 4 个空格仍然显示为呈现的 html..

【问题讨论】：

【解决方案1】：

mouseleave() 应该是您需要的：

$('#nav').mouseleave(function() {
  setTimeout(function() {
   $('.sub-link').fadeOut();
  }, 2000);
});

来自文档：

另一方面，mouseleave 事件仅在鼠标离开它所绑定的元素时触发其处理程序，不是后代。

如果光标位于您将事件绑定到的元素内的元素上，则触发mouseout 是对的。但是mouseleave实际上只有在光标离开while元素时才会触发。

This example 非常说明了mouseleave() 和mouseout() 之间的区别。

【讨论】：

我在发布我的问题几分钟后发现了这个功能。起初它似乎工作，但后来它开始做同样的事情。 :(
@centr0：如果您可以提供指向示例页面的链接，我们可能会提供进一步的帮助。
@centr0：好的，我明白了。问题是子菜单不再包含在导航栏中（由于可见性）。一个想法是让#nav 封装子菜单的高度，并用另一个围绕主菜单列表的div 创建背景颜色效果（灰色条）。
太棒了！有效。从没想过这会是一个css问题，但它是有道理的！感谢您抽出宝贵的时间。 :)

【解决方案2】：

尝试使用 $('#nav, #nav > a') 之类的选择器

【讨论】：