Question

这可能吗？我的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规则。

Answer 1

如果您使用.hover()，它也会影响父母，因为这是mouseenter和mouseleave事件的工作方式，例如：

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

You can give it a try here，与mouseover和mouseout不同，事件在进入/离开儿童时不会触发，因此对父母采取的行动不是t“撤消”，直到你实际离开父母，这似乎是你所追求的。

或者，如果你只是做造型，使用纯CSS，就像这样（在IE6中不起作用）：

li:hover > a { color: red; }

You can test it here

Answer 2

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

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

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

2 个答案: