Question

我正在尝试编写一个脚本，允许我在悬停时更改前一个li的css。

这是结构：

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

jquery找到以前的li并更改css

2 个答案: