After css change, hang does not work

Question

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

In addition, $('.bar:hover').css({'color':'#fff'}); does not change the color of the hover, why? What am I missing?

http://jsfiddle.net/hh4NJ/

Answer 1

You have not defined what you mean by "hover", but if you are talking about CSS :hover , it is because the inline styles (set by .css() override the styles of styles.

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

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

I do not believe this works with older IE.

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

---

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

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

 .whiteColor { color:#fff; } 

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

---

As for your update, you cannot use pseudo selectors such as :hover to select the DOM.

Answer 2

In cascade, the rules in the style attribute will beat the rules applied by the selector.

The jQuery css method changes the style attribute.

Keep your CSS and JS separate. Use JS to edit the addition and removal of classes from HTML and apply CSS using the class selector. (Make sure the rule :hover still has specific enough).

As a quick and dirty solution, you can also make your own rules :hover !important , but you shouldn't .

In addition, $('.bar:hover').css({'color':'#fff'}); does not change the color of the hover, why?

The jQuery selection mechanism matches the elements; it does not modify the stylesheet. If this were confirmed, you would say: “When I execute this make.bar code, I point to white,” and not “When I point to .bar, make it white.”