JQuery Change text color

I am trying to change the color on text on hover using Jquery. I think my code is right but it is now working. Here is my JQuery code:

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

my 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;
}

and my site开发者_如何转开发 master page:

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

Any ideas? Thank you.

I don't know if JQuery is the right way to do this.. Have you tried in css

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

color:#97A59E !important;

remove the !important part from your css definition

In your CSS you are setting the colour with !important. This will make it take precedence over anything without !important. Try your code again but with a !important after the colours. ie:

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

I should add that Sjobe's answer is probably better if you are able to use a pure CSS solution. Its still good to know why somethign doesn't work though anyway. :)