Question

I have the next menu structure.

<li class="menu-422"><a href="item-1" title="">Item 1</a></li>
<li class="menu-444"><a href="item-2" title="">Item 2</a></li>
<li class="menu-449"><a href="item-3" title="">Item 3</a></li>
<li class="menu-452"><a href="item-4" title="">Item 4</a></li>

In this structure the items (the a-tag) have background. I want to change the background of the next item on hover event. If I’m over the Item 2 I want to change the background of the Item 3. I tried it with jQuery, but I didn’t find the appropriate code.

jQuery("#mymenu li a").hover(function() {
  jQuery(this).next("li a").css('background', 'none');
}

I tried it with nextAll, with full selector path, but I can’t select the next element.

Answer 1

Upon hover, you want to go up to the parent li, then use next() to get to the next li, then find('a') inside of that li:

$("#mymenu li a").hover(function() {
    $(this).parent().next().find("a").css('background', 'none');
});