Change jquery text color

Question

I am trying to change the color of text on hover using jQuery. I think my code is right, but now it works. 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 main 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.

Answer 1

I don't know if jQuery is suitable for this. Have you tried in css

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

Answer 2

In your CSS, you set the color with! important. This will make it a priority over anything without importance. Repeat your code, but with importance after colors. i.e:

$(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 can use a clean CSS solution. Its still good to know why somethign is not working, though anyway. :)

Answer 3

color:#97A59E !important;

!important css