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

Hover style remains when DIV is moved from under the cursor in IE8

本文关键字：悬停 样式 移动 DIV 中将 IE8 光标 方移动      更新时间：2023-09-26

我有实时的jsFiddle示例

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

在IE8中，它仍然"悬停"（深色背景），但现在不在鼠标光标下方！

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

通过克隆它，您将强制 IE 创建一个新元素，并且由于它不在页面上，因此无法对其应用悬停状态。然后只需在容器中预置，删除原始文件，即可完成。

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

请参阅：http://jsfiddle.net/y8PCc/1/

感谢德米特里在这里的回答：Internet Explorer：当目标 DOM 元素在 DOM 中移动时，悬停状态变得粘滞

您可以使用类而不是伪类，并在移动后将其删除

$(".elem")
    .hover(function(e){
        $(this).toggleClass("elem-hover", e.type == "mouseenter");
    })
    .click(function(){
        $(".elem:first").before(this)                    
        $(this).removeClass("elem-hover")
    })

演示 http://jsfiddle.net/ByEzV/4/

如果你把你的jQuery改成这个，它应该在ie8中工作。

$(".elem").click(function(){
$(".elem:first").before(this);
$(this).css('background', '#fff').css('color', '#000');
})​
相关文章：