2

我有现场 jsFiddle 示例

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

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

4

3 回答 3

3

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

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

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

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

从他的回答中归功于 Dmitry：Internet Explorer :hover state 当目标 DOM 元素在 DOM 中移动时变得粘滞

于 2012-06-08T14:34:36.643 回答
1

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

$(".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/

于 2012-06-09T06:49:43.390 回答
0

如果您将 jQuery 更改为此它应该可以在 ie8 中使用。

$(".elem").click(function(){
$(".elem:first").before(this);
$(this).css('background', '#fff').css('color', '#000');
})​
于 2012-06-08T14:33:36.773 回答