After changing css, hover doesn't work

Question

After running this: $('.bar').css({'color':'#fff'}); hover for .bar stops working. Why?

Also, $('.bar:hover').css({'color':'#fff'}); doesn't change hover's color too, why? What am I missing?

http://jsfiddle.net/hh4NJ/

Answer 1

You haven't defined what you mean by "hover", but if you're talking about CSS :hover, then it's because inline styles (as set by .css() override stylesheet styles.

You can add !important to your CSS definition to override the inline.

.bar:hover {
    color: #ABCDEF !important;
}

I don't believe this works with older IE though.

DEMO: http://jsfiddle.net/hh4NJ/1/

---

Another (and arguably better) solution would be to use .addClass() instead of .css() to change the style. Then you can take care of all of it in your CSS (except for adding/removing the class of course).

$('.bar').addClass('whiteColor');

.whiteColor {
    color:#fff;
}

DEMO: http://jsfiddle.net/hh4NJ/2/

---

Regarding your update, you can't use pseudo selectors like :hover for DOM selection.