Question

$(document).ready(function(){
    $('li').hover(function(){
        $(this).css({"background-color" : "#0066cc" , "color" :   "white"})
    },function(){
        $(this).css({"background-color" : "#0000cc" , "color" :  "black"})
    });

})

我想让jquery为我做的是：

当您将鼠标悬停在LI元素上时，该元素背景颜色应转为＃0066cc（工作正常）。但是，我也希望在相同的悬停时字体颜色变为白色。这是我的代码失败的原因，因为字体没有变白。

当.hover不再发生时，列表的原始颜色应恢复正常。

    .menu{
        display:inline;
        float:left;
        width:10%;
    }

    ul{
        background-color:#0000cc;
        display:inline;
        float:left;
        border:1px solid black;
        width:60%;
        height:100px;
        text-align:center;
    }
    li{
        border:1px solid red;
        list-style-type:none;
        padding-left:0px;
        padding-right:0px;
        height:30px;
        font-size:30px;
        text-align:center;
    }
    a{
        color:black;
    }

</style>
</head>

   <body>
      <header>
        <div>
            <img src = "greenProject/images/menu.jpeg" class = "menu" alt =  "Image not available">
        </div>

        <ul>
            <li><a href = "#">Home</a></li>
            <li><a href = "#">About Us</a></li>
            <li><a href = "#">Contact Us</a></li>
        </ul>

</header>
</body>
</html>

我认为jquery脚本可以完成这项工作，但它没有正确执行它。为了让这项工作对我来说，我错过了什么？

System.Net.WebSockets

Answer 1

列表项的文本颜色变化很好，但这不会影响列表项中链接的文本颜色。

要设置链接的文本颜色，您需要在列表项中找到它们：

$(document).ready(function(){
  $('li').hover(function(){
    $(this).css({"background-color" : "#0066cc" }).find('a').css({ "color" : "white" });
  },function(){
    $(this).css({"background-color" : "#0000cc" }).find('a').css({ "color" : "black" });
  });
});

您也可以在CSS中执行此操作，而不是使用Javascript事件：

li:hover {
  background: #0066cc;
}
li:hover a {
  color: white;
}

为什么我的.hover（）事件处理程序的<li>元素的颜色属性没有变化？

1 个答案: