Question

我想在鼠标移过时更改包含锚点的li的颜色，我这样做

 <ul id="SonsItemList">
     <li class="sonItem"><a id="son" href="#" >son 1</a></li>
      <li class="sonItem"><a id="son" href="#" >son 2</a></li>        
 </ul>

和jquery是

 $(document).ready(function(){
            $("a#son").hover(function(){
               $("li.sonItem").css("background-color","black");  // it make all li background => black


        });

我只是想让那个男人过来改变它的背景，我该怎么做呢？ }）;

Answer 1

您根本不需要任何JavaScript。你可以使用CSS：

li.sonItem:hover 
{
    background-color: black;
}

Answer 2

这样做：

$("a[id='son']").hover(function(){
   $(this).closest("li.sonItem").css("background-color","black");  
});

注意：这样可以正常工作，但是你不应该有超过1个具有相同内容的元素（你可以，但这是一个非常非常糟糕的做法），如果这样做会更好您使用的是某个类，例如class="son"，您的选择器将为$("a.son")。

干杯

Answer 3

如果你想要一个漂亮的悬停效果然后你需要jquery，你还需要jquery-color.js，代码如下：

<script type="text/javascript">
    $(function () {
        $('#menu .dummyclass').mouseover(function () {
            $(this).animate({
                backgroundColor: '#FF0000'
            }, 50, function () { });
        });
    });
    $(function () {
        $('#menu .dummyclass').mouseleave(function () {
            $(this).animate({
                backgroundColor: '#000000'
            }, 600, function () { });
        });
    });
</script>

HTML标记：

<div id="menu">
    <ul>
        <li class="dummyclass">Home</li>
        <li class="dummyclass">Fixtures</li>
        <li class="dummyclass">Results</li>
        <li class="dummyclass">Tables</li>
        <li class="dummyclass">Constitution</li>
        <li class="dummyclass" style="border-right: none;">Contact Us</li>
    </ul>
</div>

CSS：

#menu ul li .dummyclass {
    /*Dummy class to aid hovering with jQuery*/
}

Answer 4

ID是唯一的，所以不要重复，你可以在课堂上使用

$(document).ready(function(){
  $(".son").hover(function(){
    $(".sonItem").css("background-color","black");
    },function(){
    $(".sonItem").css("background-color","white");
    });
});

<ul id="SonsItemList">
     <li class="sonItem"><a class="son" href="#" >son 1</a></li>
      <li class="sonItem"><a class="son" href="#" >son 2</a></li>        
</ul>

使用jquery更改li的背景颜色

4 个答案: