CSS background-color precedence

4
votes

I'm changing the colors of a table rows on hover with jQuery and I've noticed that in the following instances I get different results.

The CSS is as follows:

.normalcolor {
    background-color: #dedede;
}
.reddishcolor {
    background-color: #ffc59c;
}
.hovercolor {
    background-color: #f1e1c0;
}

Now, I'm doing the hover effect with jQuery, using this code:

$("table.withhover tr").hover(function(){
    $(this).addClass("hovercolor");
}, function(){
    $(this).removeClass("hovercolor");
});

The strange thing is that when I hover over a row with class="normalcolor", the background color changes to the one from .hovercolor. However, when I hover a row with class="reddishcolor" the background color doesn't change.

Is this normal? And if yes, why? It has anything to do with the colors?

Thanks!

2
csshoverbackground-color
maybe you have problem with table.withhover? can you give us a live example on jsbin.com? - Sotiris
If you check this jsfiddle: jsfiddle.net/wyZem, you'll see the simple example works as you've described it. Also note that you can cleanup your hover event handler with the toggleClass method. - Pat
@Sotiris the problem was in the CSS declarations. See the accepted answer. Thanks anyway! - Alex

2 Answers

7
votes

Have you specified the CSS classes in exactly that order, or is the .reddishcolor class specificed last?

When more than one style applies to an element, the most specific rule is used. If the rules are equally specific (as in your case), the latest rule is used.

If you can't change the order of the CSS rules, you can make the hover class more specific, for example by specifying the element name also:

tr.hovercolor {
  background-color: #f1e1c0;
}
1
votes

You have to remove the old CSS class which defines the default color, then add the new class which defines the hover color:

$().hover(function ()
{
    $(this).removeClass("default-color-class").addClass("hover-color-class");
});

... Or you could play around with the !important CSS keyword, to make your hover color class take precedence over other classes attached to an element:

.hover-state { color: #fff !important; }

Note: The !important keyword is not supported by IE6, and FireFox 1.X.

... Or you could be more specific in your scoping of your hover color class:

.default-state { ... };
table .hover-state { ... }; /* more specific rules override less specific ones */