title: CSS Pseudo-classes with jQuery
body: <p>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 <code>&lt;div</code>>s, #foo and #bar. #foo has a lot of URLs, and has the following CSS defined:</p>
  
  <pre><code>#foo a {color: blue; border-bottom: 1px dashed blue}
  #foo a:hover {color: black; border-bottom: 1px solid black}
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>//...
  $("#bar").click(function () {
    $("#foo a").css("color", "red");
  });
  //...
  </code></pre>
  
  <p>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.</p>
  
  <p>Since I see what jQuery does is put an inline style to <code>&lt;a</code>>s within #foo, makes them into <code>&lt;a style="color:red;" href="..."</code>>, 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...</p>
  
  <p>still, is there any solutions that do not require me to write something like</p>
  
  <pre><code>$("#foo a").hover(
      function(){ $(this).css("color", "black");},
      function(){ $(this).css("color", "blue");}
  )
  </code></pre>
  
  <p>?</p>
  
  <p>thanks.</p>