Po przeniesieniu węzła do nowego miejsca nadal jest wyświetlany jako unoszony. Jak mogę to wyłączyć?

Question

W IE7 i IE8 po przeniesieniu odsłoniętego łącza do nowego miejsca nadal jest wyświetlany jako ukryty. W przeglądarce Firefox i Chrome link jest wyświetlany jako unhovered. W poniższym przykładzie, jeśli klikniesz na link, zostanie on przeniesiony do drugiego wiersza, ale nadal będzie czerwony. Czy można naprawić takie zachowanie?

<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

Nie lubię go, ale klonowanie węzeł i usunięciu oryginalnego wydaje się działać:

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

Live example

Tam, zamiast faktycznie przesuwając Węzeł, robimy jego głęboki klon (cloneNode(true)) i dołączamy go zamiast tego. Następnie usuwamy oryginał (this.parentNode.removeChild(this)). Wydaje się to unikać utrzymywania informacji o stanie przechowywanych przez IE.