7

我有以下脚本，它在 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。

什么有效：

发生的情况是，当我将鼠标悬停在 a 上时.widget，css 会导致.divButtons显示。到目前为止一切都很好。当我将 a.widget移到另一个.widget并放手时，.widgets 改变了位置，而.widget我悬停在上面的仍然显示.divButtons，一切都很好。如果 Imouseout和over another ，则从I was ing over消失.widget并出现在I am ing over 上。到目前为止一切都很好。hover.widget.divButtons.widgethover.widgethover

问题：

IE8 中的问题（在 Chrome 中不会发生）是当 i hoverover a时.widget，这会导致.divButtons出现在.widgetI am hovering over 上。如果我将它.widget移到屏幕的white一部分然后放开，我不再hover在 上.widget，但.divButtons仍然显示在.widget我刚刚放开的位置上。

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

问题：

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

4

4 回答 4

1

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

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

我已经使用了一个.hover类.widget来维护它，因为我们无法:hover使用 jquery 删除。

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 的版本有这样的错误。

于 2012-11-16T03:45:58.787 回答
1

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

CSS

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

JS

$('.widget').hover(function(e){
    $(e.currentTarget).addClass('hover');
},function(e){
    $(e.currentTarget).removeClass('hover');
});
于 2012-11-16T05:38:36.640 回答
0

在将悬停样式应用于除锚之外的任何内容时，Internet Explorer 真的不能被信任。

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

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

$( ".column" ).sortable({
    connectWith: ".column",
    tolerance: 'pointer',
    helper: 'clone' // added
});
于 2012-11-12T10:12:40.433 回答
0

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

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

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

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

于 2012-11-12T16:25:18.963 回答