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");
});

你可以在这里尝试一下,不像,mouseover并且mouseout,当进入/离开孩子时事件不会触发,所以对父母采取的行动不是"撤消",直到你实际离开父母,这似乎是什么你在追求.

或者,如果你只是做样式,使用纯CSS,就像这样(在IE6中不起作用):

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

你可以在这里测试一下.