Jquery 使用Sortable时悬停不消失

我有以下脚本，它在Chrome中运行良好，但在IE8中不起作用：

jQuery:

$("<div class='divButtons'></div>").appendTo( $(".widget_header") );
$(".divButtons").text("321");

.divButtons { background:orange; display:none; }
.widget:hover .divButtons { display:block; }

jsFiddle:

$("<div class='divButtons'></div>").appendTo( $(".widget_header") );
$(".divButtons").text("321");

.divButtons { background:orange; display:none; }
.widget:hover .divButtons { display:block; }

这是一个完整的例子

什么有效：

$("<div class='divButtons'></div>").appendTo( $(".widget_header") );
$(".divButtons").text("321");

.divButtons { background:orange; display:none; }
.widget:hover .divButtons { display:block; }

当我将鼠标悬停在

.widget

上时，css会导致

.divButtons

显示。到目前为止一切都很好。当我将一个

.widget

移动到另一个

.widget

并放开时，

.widget

会改变位置，而我悬停在上面的

.widget

仍然显示

.divButtons

，一切正常。如果我将

鼠标移出
.widget
并将
悬停在另一个
.widget
上，则
.divButtons
将从我悬停在
上的
.widget
中消失，并出现在
上。widget
我将
悬停在
上。到目前为止一切都很好

问题：

$("<div class='divButtons'></div>").appendTo( $(".widget_header") );
$(".divButtons").text("321");

.divButtons { background:orange; display:none; }
.widget:hover .divButtons { display:block; }

IE8中的问题在Chrome中没有出现，当我将
鼠标悬停在
.widget
上时，会导致
.divButtons
出现在
.widget
鼠标悬停在
上。如果我随后将
.widget
移动到屏幕的
白色部分，然后放开，我不再将
悬停在
.widget
上，而是
.divButtons
仍显示在
.widget
上

这不应该发生。正如我前面提到的，这在Chrome中工作得很好

问题：

$("<div class='divButtons'></div>").appendTo( $(".widget_header") );
$(".divButtons").text("321");

.divButtons { background:orange; display:none; }
.widget:hover .divButtons { display:block; }

有什么方法可以让它在IE8中正常工作，因为它目前在Chrome中工作？
当涉及到将悬停样式应用于除锚以外的任何东西时，Internet Explorer都不可信

显然，它不会在DOM中移动时重新绘制项目，也不会重置悬停状态，除非鼠标再次进入该区域。要解决此问题，可以克隆拖动的项，而不是直接使用该项

sortable（）
方法有一个简单的选项：

$( ".column" ).sortable({
    connectWith: ".column",
    tolerance: 'pointer',
    helper: 'clone' // added
});

IE9也有同样的问题。Jack是对的，如果在mouseout发生之前更改了DOM元素，它经常会陷入悬停状态

我找不到这种行为的可靠解决方案，所以我切换到jQuery
.hover（）
而不是
：hover
伪类，如下所示：

$(elt).hover(function () {
    $(this).addClass("jHover");
}, function () {
    $(this).removeClass("jHover");
});

它更可靠，虽然不是很酷，是的。
IE8似乎有一个缺陷，当元素从鼠标范围下移出时，mouseout或mouseleave从未对元素触发。因此，永远不会删除
：hover
，并且不会调用jquery中的所有mouseout、hoverleave等事件侦听器

我想到的是，当一个
.widget
被释放时，检查是否有
.column
被悬停。如果没有列被悬停，我们将从小部件中删除悬停状态

我在
.widget
上使用了一个
.hover
类来维护它，因为我们无法使用jquery删除
：hover

jsFiddle

这是一个工作的修复程序

CSS

.widget.hover .divButtons { display:block; }​

jQuery

// We use this rather than :hover as :hover didn't always work in ie
$('.column').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

// This is our base widget hover code
$('.widget').hover(function() {
    $('.widget.hover').removeClass('hover');
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

jQuery可排序调用

$( ".column" ).sortable({
    connectWith: ".column",
    tolerance: 'pointer',
    // We use stop to call this when the widget has been dropped
    stop: function(event, ui) {
        // We wait 1 millisecond until after the widget is dropped
        setTimeout(function() {
            // Check if any widget is hovered. Good browsers will have 0 here and skip the following. IE8 will have 1 here
            if ($('.widget.hover').size() > 0) {
                // We check if the widgets parent column does not has hover
                if (!$('.widget.hover').first().parent().is('.hover')) {
                    // If no column hover. We remove this hover class
                    $('.widget.hover').removeClass('hover');
                }
            }
        }, 1);
    }
});

我希望这对你有用

在2012年，由于IE版本有如此多的bug，我们仍然不得不进行如此困难的工作，这真是令人恼火
 改为使用
悬停
伪类，您能试试这个吗

CSS

JS

只要启动更新事件，此操作就有效。即使没有触发更新事件，我也需要它工作，例如，当一个.widget被拖动时，但它最终会被拖回它的“原始位置”。发生这种情况时，不会触发更新事件。但应该始终触发停止事件。不幸的是，我也不能使用
stop
。因为它会停止工作部件的工作，即使用原始脚本，将一个
.widget
移动到另一个
.widget
的位置，此时鼠标仍悬停在已放置的小部件上，不会删除
.divbutton
。但是使用
停止
，只要您放下
.widget
，即使您仍在
.widget
上悬停，
.divButtons
也会消失。您必须稍微移动鼠标，才能重新显示
.divbutions
。因此，基本上，我正在寻找一种不会破坏现有脚本功能的解决方案。@oshirowanen感谢您的评论，我发现该解决方案更容易。。。只需克隆拖动的元素：）可能我没有正确使用
克隆
，但我刚刚尝试过，它似乎具有与
停止
类似的效果，即
.divButtons
在不应该消失的时候不断消失。这似乎产生了与我最初遇到的问题完全相同的结果。嗯，然后我只能想出一个粗略的解决办法：我刚刚在真正的IE8中尝试了你的最新示例，而不是通过IE9模拟IE8，它不起作用。如果我移动一个
.widget
几个像素，然后放开鼠标，之后我不移动鼠标，这意味着它仍然悬停在已放下的
.widget
上，
.divbutions
将消失，直到鼠标再次移动。这不是我发布的原始脚本出现的问题。