jQuery / JavaScript - 当鼠标悬停在另一个元素上时触发悬停在一个元素上

发布于 2024-09-16 07:58:16 字数 494 浏览 3 评论 0原文

这可能吗？我的 HTML 看起来像这样：

<ul>
  <li> <a> link </a> </li>
  <li> <a> link </a> </li>
  <li> <a> link </a> 
    <ul>
      <li> <a> sub-link </a> </li>  
      <li> <a> sub-link </a> </li>  
      <li> <a> sub-link </a> </li>  
    </ul>
  </li>
</ul>

基本上我想当鼠标悬停在子菜单链接上时触发父菜单链接上的悬停 CSS 规则。

原文

Is this possible? My HTML looks like this:

<ul>
  <li> <a> link </a> </li>
  <li> <a> link </a> </li>
  <li> <a> link </a> 
    <ul>
      <li> <a> sub-link </a> </li>  
      <li> <a> sub-link </a> </li>  
      <li> <a> sub-link </a> </li>  
    </ul>
  </li>
</ul>

Basically I want to trigger the hover CSS rule on the parent menu link when the mouse is over a child menu link.

分享到QQ

分享到微博

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

发布评论

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

ㄖ落Θ余辉 2024-09-23 07:58:16

如果您使用 .hover() ，它将影响父级好吧，因为这就是 mouseenter 和 mouseleave 事件的工作原理，例如：

$("li").hover(function() {
  $(this).toggleClass("active");
});

您可以在这里尝试一下，与mouseover和mouseout不同，进入时事件不会触发/离开孩子，所以对父母采取的行动不会“撤消”，直到你真正离开父母，这似乎就是你所追求的。

或者，如果您只是进行样式设置，请使用纯 CSS，如下所示（在 IE6 中不起作用）：

li:hover > a { color: red; }

您可以在这里测试。

If you use .hover() it'll affect the parent as well, since that's how the mouseenter and mouseleave events work, for example:

$("li").hover(function() {
  $(this).toggleClass("active");
});

You can give it a try here, unlike mouseover and mouseout, the events don't fire when entering/leaving children, so the action taken on the parent isn't "undone" until you actually leave the parent as well, which seems to be what you're after.

Or, use pure CSS if you're just doing styling, like this (doesn't work in IE6):

li:hover > a { color: red; }

You can test it here.

回复收藏 0 原文

奢华的一滴泪 2024-09-23 07:58:16

您可以使用 Parent() 方法访问父节点，并切换其绑定 mouseover 和 mouseout 事件的类。

$("#childnode").bind("mouseover", function() {
   $(this).parent().addClass("onmouseover");
}).bind("mouseout", function() {
   $(this).parent().removeClass("onmouseover");
});

You can reach the parent node by using parent() method and toggle its class binding the mouseover and mouseout events.

$("#childnode").bind("mouseover", function() {
   $(this).parent().addClass("onmouseover");
}).bind("mouseout", function() {
   $(this).parent().removeClass("onmouseover");
});

回复收藏 0 原文

~没有更多了~