How can I change the background of NEXT item with jQuery?

Question

I have the following approach but I cannot make it work. I want to remove the background of the following li-tag on mouseover.

My code:

<div id="mainmenu">
  <ul>
          <li><a href="index.php?id=2"  >Das Hotel</a></li>
          <li><a href="index.php?id=3"  >Angebote</a></li>
          <li><a href="index.php?id=4"  >Reservierung</a></li>
          <li><a href="index.php?id=5"  >Kontakt</a></li>
          <li><a href="index.php?id=6"  >Anfahrt</a></li>
          <li><a href="index.php?id=7"  >Rechtliches</a></li>
          <li><a href="index.php?id=8"  >Impressum</a></li>
  </ul>
</div>

The jQuery:

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

Here the fiddle:

http://jsfiddle.net/bQxJu/2/

Answer 1

http://jsfiddle.net/bQxJu/6/

The JS had an error in it, so I had to fix it. I also added a "mouse out" event handler to put the background back. Also, you were setting 'none' to the BG of the LI, but your CSS had the background on the anchor, not the li.

Here's the JS:

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