Question

了

将鼠标移动到其中一个＆＃34;堆叠＆＃34;元素 - 悬停的项目将其颜色变为黑暗单击一个项目 - 它将移动到堆栈的顶部。

在IE8中，它仍然是“徘徊”＃34; （深色背景）但它现在不在鼠标光标下！

Answer 1

尝试克隆元素而不是移动原始元素。使用原始元素，你将元素放入DOM中的当前状态并将其放置在新位置，看起来IE在重新发生这种情况时不会重新绘制元素，或重置其状态直到再次鼠标悬停。

通过克隆它，你迫使IE创建一个新元素，因为它不在页面上，所以不能将悬停状态应用于它。然后只需在容器前面，删除原件，然后就完成了。

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

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

从Dmitry的回答中得知：Internet Explorer :hover state becomes sticky when the target DOM element is moved in the DOM

Answer 2

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

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

demo http://jsfiddle.net/ByEzV/4/

Answer 3

如果你将jQuery更改为它，它应该在ie8。

中工作

$(".elem").click(function(){
$(".elem:first").before(this);
$(this).css('background', '#fff').css('color', '#000');
})

当在IE8中从光标下移动DIV时，悬停样式仍然存在

3 个答案: