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

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 不同，事件不会在进入/离开子级时触发，因此对父级采取的操作不是“撤消”，直到您实际上也离开了 parent ，这似乎就是您所追求的。

或者，如果您只是进行样式设置，请使用纯 CSS，就像这样(在 IE6 中不起作用):

li:hover > a { color: red; }​

You can test it here .