CSS Pseudo-classes with jQuery

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; }

Answer 2

Extracted from Setting CSS Pseudo Class Rules From Javascript

You actually can change the value of a class on hover or with :after or whatever pseudo-class you want with javascript:

$(document).ready(function()
{
    var left = (($('.selected').width() - 7) / 2) + 'px';
    document.styleSheets[1].insertRule('.selected:after { left: ' + left + '; }', 0);
    document.styleSheets[0].cssRules[0].style.left = left;
});

I hope this helps anyone.

Answer 3

AFAIK, jQuery can't set pseudo classes. However, there's another way:

http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

Answer 4

Maybe you could remove the class you added when you hover over the links, like this:

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

[EDIT]: You may need to add an IF statement to see if the class is there in the first place.

Answer 5

Another nasty way of doing it using Javascript is to empty the container element and populate it again with the contents and setup the click event again. This destroys all states and events so they have to be setup again but for simple things that dont contain masses of data it works!

I use this for Nav menu's that use the :hover class.

$('#page_nav ul').click(clearNavMenu_Hover);

function clearNavMenu_Hover() {
    var tmpStore=$('#page_nav').html();
    $('#page_nav').empty();
    $('#page_nav').html(tmpStore);
    $('#page_nav ul').click(clearNavMenu_Hover);
}