如何将一个类添加到<li>的直接子元素？

Question

<ul>
 <li><a href="">link 1</a></li>
 <li><a href="">link 2</a></li>
 <li><a href="">link 3</a>
   <ul>
    <li><a href="">link 1</a></li>
    <li><a href="">link 2</a></li>
   </ul>
 </li>
</ul>

如何在 LI 上悬停时将类添加到直接子级 'a'，而在鼠标移出 LI 时，应将类删除。

我正在尝试编写以下代码来实现此目的。

$('.nice-menu li').mouseover(function(){
       $(this).children('a' , 'span a')
    }) ;  

- Swati Sharma

---

他们不应该已经有一个类，然后状态由 CSS 处理吗？ - mcgrailm

Answer 1

您可以使用 .hover() 和 .toggleClass() 来实现，如下所示：

$('.nice-menu li').hover(function(){
   $(this).children('a' , 'span a').toggleClass('hoverClass');
});  

请注意，事件会冒泡，因此在嵌套链接的情况下，类将在父元素和子元素上切换，但通常您希望在菜单中突出显示所处的父元素，不确定是否需要这样做，您可以在这里看到我所说的。

- Nick Craver

Answer 2

$('.nice-menu').find('li > a').bind('mouseenter', function(){
    $(this).addClass('whatsoever');
});

$('.nice-menu').find('li > a').bind('mouseleave', function(){
    $(this).removeClass('whatsoever');
});

或者使用jQuery的.hover()，它实际上做的是完全相同的事情。

- jAndy