How to add a class to the immediate children of an <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>

How to add class to the immediate children 'a' of the LI, while on hover of the LI.

while i mouse out of the LI. the class should be removed.

I am trying to write following code for this.

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

Answer 1

You can do this using .hover() and .toggleClass(), like this:

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

Note that the event bubbles though, so in the case of the nested links, the class will be toggled on both the parent and the children, but often you want to highlight the parent you're under in the menu, not sure that you do though, you can see what I mean here.

Answer 2

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

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

or use the jQuery .hover() which actually does the exact same.