jQuery 更改文本颜色

Question

我正在尝试使用Jquery在悬停时更改文本颜色。我认为我的代码是正确的，但它现在没有起作用。这是我的JQuery代码:

$(document).ready(function() {
    $('#menu li a').hover(function() {
       $(this).css('color','#ffffff');
    }, function() {
       $(this).css('color', '#97A59E');
    });
});

我的CSS：

#menu li a 
{
color:#97A59E !important;
background-color:#3e4347 !important;
display: block;
float: left;
line-height:2.25em!important;
text-align:center;
width:300px;
}

我的网站母版页：

    <ul id="menu">
    <li><a id="nav-home" href="<%= Url.Action("Index", "Home") %>">Home</a></li>
    <li><a id="nav-about" href="<%= Url.Action("About","Home") %>">About</a></li> 
    </ul>

有什么想法吗？谢谢。

- Lars

---

从你的CSS定义中删除!important - jAndy

Answer 1

我不确定JQuery是否是完成此任务的正确方法...您尝试过使用CSS吗？

#menu li a { color: #97A59E}
#menu li a:hover { color: #ffffff}

- sjobe

---

这个可以用！不过，我想再加一个复杂点的要求。我希望每个 #menu li a 的颜色都不同...？ - Lars

我对你是如何做到的很感兴趣。颜色是随机的吗？ - sjobe

Answer 2

在你的CSS中，你正在使用!important定义颜色。这将使它优先于无!important的任何内容。尝试在颜色后再加上一个!important，例如：

```css color: red !important; ```

重新运行你的代码并查看效果。

$(document).ready(function() {
    $('#menu li a').hover(function() {
       $(this).css('color','#ffffff !important');
    }, function() {
       $(this).css('color', '#97A59E !important');
    });
});

我应该补充一下，如果您能够使用纯CSS解决方案，Sjobe的答案可能更好。不过，了解为什么某些东西无法正常工作仍然很重要。 :)

- Chris

Answer 3

color:#97A59E !important;

从你的 css 定义中删除 !important 部分。

- jAndy

---

这当然是假设其他页面部分不需要它的情况下... :) - Chris