jquery найти предыдущий li и изменить css

Question

Я пытаюсь написать скрипт, который позволит мне изменить CSS предыдущего li при наведении курсора.

Вот структура:

<ul id="mainlevel">
  <li><a href="/" class="mainlevel" id="active_menu">Home</a></li>
  <li><a href="/" class="mainlevel">About Us</a></li>
  <li><a href="/" class="mainlevel">Products</a></li>
  <li><a href="/" class="mainlevel">Projects</a></li>
  <li><a href="/" class="mainlevel">Suppliers</a></li>
</ul>

Вот что у меня есть:

jQuery("#mainlevel li a").hover(function() {
    jQuery(this).prev("li a").css("background", "#f0f");
  });

Но это не работает .. Любая помощь будет оценена :)

Answer 1

Кажется, работает следующее:

$(document).ready(
  function() {
    $('li a').hover(
      function(){
       $(this).parent().prev('li').css('background-color','#f0f'); 
      }
      );
  }
  );

Хотя я и не удалил фоновые цвета, когда li больше не наведен.

Демонстрация по адресу: JS Bin .

Answer 2

Можете ли вы попробовать это

jQuery(this).parent().prev("li").children("a").css("background", "#f0f");

Я думаю, что методы prev () работают только с родными элементами текущего элемента. вот почему вы должны получить родительский элемент текущего элемента, а затем получить элемент prev