fellow coders, just came across a strange (at least to me) behaviour for the .addClass method. I’m trying to highlight an item (div) when the mouse hovers over it by using the .addClass method and a .highlight class that changes the background-color of the div. (i’m using jQuery instead of the css :hover method for a reason.)
The code works meaning, the .highlight class is added to the div however the color is not changing. the color will only change when the div’s default css class does NOT have background-color defined in it. in other words, if the div is defined with a class that includes say background-color: white; the .highlight class is added but the color does not change.
Is this normal or am I missing something? for now, i’m using .css(‘background-color’, ….) to get the highlight going but i’m curious as to why the .addClass method is not working.
thanks.
Your original CSS class is overriding the new one.
You can prevent this by adding
!importantto the hover rule, or by making its selector more specific, or by moving it after the original class in the CSS.