When I move hovered node to new place it is still displayed as hovered. How can I unhover it?

Question

In IE7 and IE8 when I move hovered link to new place it is still displayed as hovered. In Firefox and Chrome link is displayed as unhovered. In the example below if you click on the link it will be moved to the second row but will still be red. Is it possible to fix such behavior?

<style>
a { color:blue; }
a:hover { color:red; }
</style>
<div id="div1">
    First Row
    <a id="a1" href="javascript:void(0);" onclick="document.getElementById('div2').appendChild(this);">Click It</a>
</div>
<div id="div2">
    Second Row
</div>

Live example

Answer 1

I don't like it, but cloning the node and removing the original seems to work:

<a id="a1" href="javascript:void(0);" onclick="document.getElementById('div2').appendChild(this.cloneNode(true)); this.parentNode.removeChild(this);">Click It</a>

Live example

There, instead of actually moving the node, we do a deep clone of it (cloneNode(true)) and append that instead. Then we remove the original (this.parentNode.removeChild(this)). This seems to avoid keeping the state information IE is keeping.