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

Question

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

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

当用户将鼠标悬停在整个#nav之外时，我想做的就是fadeOut那个子菜单。

我的mouseout代码：

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

当我将鼠标悬停在驻留在#nav中的锚链接时，我会看到子菜单。然后我猜mouseout（）甚至会触发，子菜单会淡出。反正有没有#nav和其中的任何锚链接作为一个？

我会粘贴我的标记，但即使缩进它，4个空格仍显示为渲染的html ..

示例页面位于：http://chrisparaiso.com/test/

Answer 1

mouseleave()应该是您所需要的：

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

来自文档：

  

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

如果光标位于绑定事件的元素内的元素上，则触发mouseout是正确的。但是mouseleave实际上只在光标离开while元素时触发。

This example非常显示mouseleave()和mouseout()之间的差异。

Answer 2

尝试使用$('#nav, #nav > a')

之类的选择器