CSS background-color precedence

Question

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!

Answer 1

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;
}

Answer 2

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 */