Cuando muevo el nodo anclado a un lugar nuevo, todavía se muestra como suspendido. ¿Cómo puedo desalojarlo?

Question

En IE7 e IE8 cuando muevo el enlace suspendido a un lugar nuevo, se sigue visualizando como suspendido. En Firefox y Chrome, el enlace se muestra como desprotegido. En el siguiente ejemplo, si hace clic en el enlace, se moverá a la segunda fila, pero seguirá siendo rojo. ¿Es posible arreglar tal comportamiento?

<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

no me gusta, pero la clonación del nodo y eliminar el original parece que funciona:

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

Live example

Allí, en lugar de mover realmente la nodo, hacemos un clon profundo de él (cloneNode(true)) y agregamos eso en su lugar. Luego eliminamos el original (this.parentNode.removeChild(this)). Esto parece evitar mantener la información de estado que IE mantiene.