Acabei de aprender um pouco de jQuery e estou tentando usá-lo para um simples efeito de mudança de cor. Digamos que eu tenho dois<div> s, #foo e #bar. #foo possui muitos URLs e o seguinte CSS definido:

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

agora eu gostaria de mudar a cor dos links (a: link) em #foo quando o usuário clicar em #bar, mas mantenha a cor a: hover intacta, então escrevo minha função assim:

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

O problema é que, embora essa função altere todos os links para vermelho, a cor a: hover é perdida, ou seja, quando um usuário move o cursor para os links, eles permanecem em vermelho e não ficam pretos como eu esperava.

Desde que eu vejo o que o jQuery faz é colocar um estilo embutido para<a> s dentro de #foo, os transforma em<a style="color:red;" href="...">, Acho que isso substituirá a pseudo classe: hover. Como o estilo inline attr para a pseudo-classe não foi implementado por ninguém, eu duvido que consiga obter o efeito pretendido ...

Ainda assim, existem soluções que não exijam que eu escreva algo como

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

?

obrigado.