title: jquery on slide remove hover state of the button
body: <p>Using Jquery, I have a simple slide down of a div when you click a button.
  <strong>The problem is, the button :hover state is not removed.</strong></p>
  
  <p>JS FIDDLE: <a href="http://jsfiddle.net/Y6gHb/9/" rel="nofollow">http://jsfiddle.net/Y6gHb/9/</a></p>
  
  <p>(Small note, on the version of my site, I actually need to mouseover the button again, then mouseout, for it to go back to normal state).</p>
  
  <p>Here is the JS code:</p>
  
  <pre><code>   $("a").click(function() {
          var div = $("#toggleDiv"); 
          if (!div.hasClass("open")) {
              div.animate({
                  height: "300px"
              },"fast").addClass("open");
          } else {
              div.animate({
                  height: "150px"
              },"fast").removeClass("open");
  
          }
          return false;
      });
  </code></pre>
  
  <p>As you'll see in the fiddle, the a link stays red after the slide. Which doesn't look like a big problem in this simple example, but on my site, it's really annoying. </p>
  
  <p>My question is:</p>
  
  <p><strong>Am I doing something wrong? Or How can I remove the :hover state on click?</strong></p>
  
  <p>(I have a similar problem with Twitter bootstrap tooltip).</p>