JQuery更改文本颜色

我正在尝试使用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>

---

有什么想法吗？谢谢。

我不知道JQuery是否是正确的方法。。你试过css吗

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

---

在您的CSS中，您正在使用设置颜色！重要的。这将使它优先于任何没有它的东西！重要的。请重试您的代码，但请使用！颜色之后很重要。即：

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

我应该补充一点，如果您能够使用纯CSS解决方案，Sjobe的答案可能会更好。尽管如此，知道为什么有些东西不起作用仍然很好。：）

---

删除

！重要信息

从您的

css

定义中删除

！重要信息

从您的css定义中，它当然假定由于页面的其他部分，它不需要…：）这成功了！然而，我想再增加一个复杂问题。我希望每个菜单都是不同的颜色…？我对你是怎么做的很感兴趣。颜色是随机的吗？

color:#97A59E !important;