JQuery Change text color

Question

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.

Answer 1

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}

Answer 2

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. :)

Answer 3

color:#97A59E !important;

remove the !important part from your css definition