Question

I’ve just learnt a bit jQuery, and am trying to use it for a simple color-changing effect. Let’s say I have two <div>s, #foo and #bar. #foo has a lot of URLs, and has the following CSS defined:

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

now I would like to change the color of the links (a:link) in #foo when the user clicks #bar, but keep the a:hover color untouched, so I write my function like this:

//... $('#bar').click(function () {   $('#foo a').css('color', 'red'); }); //... 

The problem is, while this function does change all the links into red, the a:hover color is lost, i.e. when a user moves the cursor on to the links, they will stay red, not turn black as I expected.

Since I see what jQuery does is put an inline style to <a>s within #foo, makes them into <a style='color:red;' href='...'>, I guess this will overwrite the :hover pseudo-class. As the inline style attr for pseudo-class has not been implemented by anyone afaik, I doubt if I can get my intended effect at all…

still, is there any solutions that do not require me to write something like

$('#foo a').hover(     function(){ $(this).css('color', 'black');},     function(){ $(this).css('color', 'blue');} ) 

?

thanks.

Answer 1

!important seems to make css property stronger than inline style, at least in Firefox. Try to change your styles to something like this:

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