封装 div 和锚链接绑定到同一事件

发布于 2024-08-27 22:27:22 字数 536 浏览 4 评论 0原文

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

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

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

我的鼠标悬停代码：

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

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

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

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

原文

im having trouble figuring out how to bind mouseout() to my entire nav bar including the links.

when a user hovers over a link in #nav a sub menu is shown. all is well there.

what i want to do is fadeOut that sub menu when the user hovers out of the entire #nav.

my code for the mouseout:

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

when i hover over an anchor link which resides in #nav, i see the sub-menu. then i guess the mouseout() even fires and the sub-menu fades out. is there anyway to have the #nav and any anchor links within it to act as one?

i'd paste my markup but even indenting it 4 spaces still shows as rendered html..

sample page at: http://chrisparaiso.com/test/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

墨小沫ゞ 2024-09-03 22:27:22

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

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

来自文档：

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

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

此示例演示了 mouseleave() 和mouseout()。

The mouseleave() should be what you need:

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

From the documentation:

The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant.

You are right that mouseout is triggered if the cursor is over an element inside the element you bound the event to. But mouseleave is really only triggered when the cursor leaves the while element.

This example demonstrates very the the differences between mouseleave() and mouseout().

回复收藏 0 原文