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并放手时，.widget更改位置，而我悬停在的.widget仍显示.divButtons ，一切都很好。如果我mouseout .widget而另一hover .widget，.divButtons从.widget消失hover .widget结束并出现在hover我hover过来。到目前为止一切都很好。

问题：

IE8中的问题（在Chrome中没有发生）是指.widget超过.divButtons，导致.widget出现在hover我身上我.widget过来。如果我然后将white移到屏幕的hover部分然后放手，我不再.widget超过.divButtons，而是.widget <{1}}我仍然放弃了。

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

问题：

任何方法都可以让它在IE8中正常运行，因为它目前在Chrome中运行？

Answer 1

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

我想出的是在.column发布时检查是否有任何.widget被徘徊。如果没有悬停列，我们将从窗口小部件中删除悬停状态。

我在.hover上使用了.widget类来维护它，因为我们无法使用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

当涉及到将锚定样式应用于锚点以外的任何东西时，无法真正信任Internet Explorer。

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

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

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

Answer 4

IE9几乎遇到了同样的问题。杰克是对的，如果在鼠标输出发生之前改变了DOM元素，它经常会陷入悬停状态。

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

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

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

使用Sortable时悬停不会消失

4 个答案: