当我将悬停节点移动到新位置时，它仍然显示为悬停。我如何取消它？

Question

在IE7和IE8中，当我将链接移动到新位置时，它仍然显示为悬停。在Firefox和Chrome链接中显示为隐藏。在下面的例子中，如果你点击链接，它将被移动到第二行，但仍然是红色。是否有可能解决这种行为？

<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

我不喜欢它，但克隆的节点，移除原有似乎工作：

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

Live example

在那里，而不是实际的移动节点，我们对它进行深层克隆（cloneNode(true)），然后添加它。然后我们删除原始（this.parentNode.removeChild(this)）。这似乎避免了IE保持状态信息。