CSS Pseudo-classes with jQuery -

I've just learned a bit, and it's trying to use it for a simple color changing effect. Suppose I have two & lt; Div > s, #foo and #bar have many URLs in #foo, and the following CSS are defined:

  #foo a {color: blue; Border bottom: 1px dashed blue} #foo a: hover {color: black; Border-bottom: 1 px solid black}  

Now when the user clicks on the #bar, I want to change the color of the link (a: link) in #foo, the color of Hoover Is untouched, so I write my work in this way:

  // ... $ ("# bar"). Click (function () {$ ("# foo a") CSS ("color", "red");}); // ...  

The problem is, while this function changes all the links in red, one: hover color is lost, that is when a user moves the cursor over the link They will remain red, I should not have black as expected.

Since I see that jQuery has an inline style of & lt; A to #foo, in & lt; One style = "color: red;" Href = "..." >, I think it will be overwritten: Skip the pseudo-class as inline style atter for the pseudo class has not been enforced by any effect, I suspect that Can I influence everyone with my intention ...

Still, is there a solution I do not need to write something like

  $ (" # Foo a "). Css ("color", "black");}, function () {$ (this). CSS ("color", "blue");})  

?

Thank you.

! It seems important that the CSS property is less than inline style, at least in Firefox. Try changing your style like this:

  #foo a: hover {color: black! Important; }