当我将悬停的节点移动到新位置时，它仍显示为悬停。我怎样才能取消悬停它？

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 正在保留的状态信息。