Deactivating the "hover" state of a hyperlink.

Deactivating the "hover" state of a hyperlink.

I have some code which moves an element from one position in the document to another, when a link is clicked. The link itself is moved as well.  The CSS makes the link's background change colour when hovering.

This problem is only occurring in IE6/7/8, which is that, when the element (containing the hyperlink which was clicked) is moved, the "hover" state of the link remains "on", that is the background colour remains, even though the link is now somewhere else on the page and no longer under the mouse. The only thing which turns the hover effect off is to move the mouse over and away from it again.

Works fine in Firefox and Chrome, the hover state disappears when the link is moved.

Question is, how do I programmatically switch the link's hover state off, so it goes back to normal in IE?  I've tried .blur(), .mouseout(), resetting the className, no luck so far.

[ed] Here's a code demo of the effect in action.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
      <head>
        <style type="text/css">

          .clearfix { overflow:hidden }

          #leftside {
            float:left;
            top: 20px;
            left: 20px;
            width: 150px;
            height: 100px;
            border: 1px solid #888;
          }
          #rightside {
            float: left;
            top: 20px;
            left: 200px;
            width: 150px;
            height: 100px;
            border: 1px solid #888;
          }
          a {
            display: block;
          }
          a:hover {
            background: yellow;
          }
        </style>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
          $(document).ready(function() {
            $("a").click(function(e) {
              e.preventDefault();
              // move link to the opposite side container.
              if ($(this).parent()[0] === $("#leftside")[0]) {
                $("#rightside").append($(this));
              } else {
                $("#leftside").append($(this));
              }
            });
          });
        </script>
      </head>
      <body>
        <div class="clearfix">
          <div id="leftside">
            <a href="#">Click me!</a>
          </div>
          <div id="rightside">
          </div>
        </div>
        <div>
          Click link to swap it to opposite sides.<br/>
          Notice, in IE 6, 7 and 8, how the "hover" state remains on even when the link is no longer under the mouse.<br/>
          How to turn it off?<br/>
        </div>
      </body>
    </html>



























































Any suggestions appreciated!