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.

remove the !important from your css definition

jAndy
– jAndy

2010-06-22 14:38:42 +00:00
Commented Jun 22, 2010 at 14:38 — jAndy
– jAndy, Commented Jun 22, 2010 at 14:38

sjobe · Accepted Answer · 2010-06-22 14:35:35Z

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}

answered Jun 22, 2010 at 14:35

sjobe

2,8373 gold badges24 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lars Over a year ago

This worked! However, I want to add one more complication. I want each #menu li a to be a different color...?

sjobe Over a year ago

I'm interested in how you did it. Were the colors random ?

jAndy · Accepted Answer · 2010-06-22 14:37:41Z

2

color:#97A59E !important;

remove the !important part from your css definition

answered Jun 22, 2010 at 14:37

jAndy

237k57 gold badges313 silver badges363 bronze badges

1 Comment

Chris Over a year ago

That does of course assume that its not needed due to other parts of the page... :)

Chris · Accepted Answer · 2010-06-22 14:42:42Z

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

edited Jun 22, 2010 at 14:42

answered Jun 22, 2010 at 14:37

Chris

27.7k7 gold badges77 silver badges94 bronze badges

Collectives™ on Stack Overflow

JQuery Change text color

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related