3

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.

1
  • remove the !important from your css definition
    – jAndy
    Jun 22, 2010 at 14:38

3 Answers 3

2

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}
2
  • This worked! However, I want to add one more complication. I want each #menu li a to be a different color...?
    – Lars
    Jun 22, 2010 at 16:06
  • I'm interested in how you did it. Were the colors random ?
    – sjobe
    Jun 22, 2010 at 18:47
2
color:#97A59E !important;

remove the !important part from your css definition

1
  • That does of course assume that its not needed due to other parts of the page... :)
    – Chris
    Jun 22, 2010 at 14:44
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. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.