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