javascript - 在 IE8 中，当 DIV 从光标下方移动时，悬停样式保持不变

Question

我有 live jsFiddle example

将鼠标移到其中一个“堆叠”元素上 - 悬停的元素将其颜色更改为深色单击一个元素 - 它正在移动到堆栈的顶部。

在 IE8 中它仍然“悬停”(深色背景)但现在不在鼠标光标下!

Answer 1

尝试克隆元素而不是移动原始元素。对于原始元素，您在 DOM 中获取其当前状态的元素并将其放置在新位置，并且在发生这种情况时，IE 似乎不会重新绘制元素，或者重置其状态，直到您再次将鼠标悬停。

通过克隆它，您将强制 IE 创建一个新元素，并且由于它不在页面上，因此无法对其应用悬停状态。然后只需添加到容器中，取出原来的容器，就大功告成了。

$(".elem").on('click', function(){
    $(this).clone(true).prependTo('#container');
    $(this).remove();
});​

参见:http://jsfiddle.net/y8PCc/1/

感谢德米特里的回答:Internet Explorer :hover state becomes sticky when the target DOM element is moved in the DOM