jquery - jQueryでNEXTアイテムの背景を変更するにはどうすればよいですか？

Question

私は次のアプローチをとっていますが、それを機能させることはできません。次のli-tagの背景をマウスオーバーで削除したいと思います。

私のコード：

<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>

jQuery：

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

ここにフィドル：

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

Answer 1

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

Answer 2

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

JSにエラーがあったので、修正する必要がありました。また、背景を元に戻すために「マウスアウト」イベントハンドラーを追加しました。また、LIのBGに「none」を設定していましたが、CSSの背景はliではなくアンカーにありました。

これが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', '');
});