使用 Sortable 时悬停不会消失

Question

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

jQuery：

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

CSS：

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

jsFiddle：

这是完整内容的jsFiddle。

什么有效：

发生的情况是，当我将鼠标悬停在 .widget 上时，css 会导致 .divButtons 显示。到目前为止一切都很好。当我将.widget 移动到另一个.widget 并放手时，.widgets 改变了位置，而我悬停在上面的.widget 仍然显示.divButtons，一切都很好。如果我 mouseout 的 .widget 和 hover 超过另一个 .widget，则 .divButtons 从 .widget 消失，我是 hovering 并出现在 .widget 我是 hover结束。到目前为止一切顺利。

问题：

在 IE8 中不会发生在 Chrome 中的问题是，当我 hover 超过 .widget 时，导致 .divButtons 出现在 .widget 上，我正在 hovering 结束。如果我随后将 .widget 移动到屏幕的 white 部分然后放开，我不再是 hovering .widget，但 .divButtons 仍然显示在 .widget 我放手吧。

这不应该发生。正如我之前提到的，这在 Chrome 中运行良好。

问题：

有什么方法可以让它在 IE8 中正常工作，因为它目前在 Chrome 中工作？

Answer 1

似乎 IE8 有一个错误，即当元素从鼠标范围下移出时，永远不会在元素上触发 mouseout 或 mouseleave。结果:hover永远不会被删除，jquery中所有的mouseout、hoverleave等事件监听器都不会被调用。

我想出的是在释放.widget 时检查是否有任何.column 被悬停。如果没有悬停列，我们会从小部件中移除悬停状态。

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

jsFiddle

这是工作修复的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 的版本有这样的错误。

Answer 2

而不是使用hover 伪类你可以试试这个

CSS

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

JS

$('.widget').hover(function(e){
    $(e.currentTarget).addClass('hover');
},function(e){
    $(e.currentTarget).removeClass('hover');
});

Answer 3

在 IE9 上遇到了几乎相同的问题。 Jack 说得对，如果 DOM 元素在 mouseout 发生之前更改，它经常会卡在悬停状态。

我找不到针对这种行为的可靠修复，所以我改用 jQuery .hover() 而不是 :hover 伪类，如下所示：

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

它更可靠，虽然不是那么酷，是的。

Answer 4

在将悬停样式应用于锚点以外的任何东西时，Internet Explorer 确实不可信。

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

sortable() 方法有一个简单的选项：

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