当我将悬停的节点移动到新位置时,它仍然显示为悬停.我该如何解除它？

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>

实例

Answer 1

我不喜欢它，但克隆节点并删除原始节点似乎有效：

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

实例

在那里，我们没有实际移动节点，而是对其进行深度克隆 ( cloneNode(true)) 并附加它。然后我们把原来的( this.parentNode.removeChild(this))去掉。这似乎避免了保留 IE 所保留的状态信息。