使用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.

什么有效:

当我将鼠标悬停在a上时.widget,css会导致.divButtons显示.到目前为止都很好.当我移动.widget到另一个.widget并放开时,.widgets改变位置,.widget我正在盘旋的仍然显示.divButtons,一切都很好.如果我mouseout的一个.widget和hover在另一个.widget中,.divButtons消失在.widget我被hover荷兰国际集团和上上出现.widget我hover荷兰国际集团过去.到目前为止都很好.

问题:

IE8中的问题,在Chrome中没有发生,是当我hover超过a时.widget,这会导致我.divButtons出现在.widget我hover身上.如果我然后将它移动.widget到white屏幕的一部分,然后放开,我不再hover超过它.widget,但.divButtons仍然显示在.widget我放开.

这不应该发生.这在我之前提到的Chrome中运行良好.

问题:

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

Answer 1

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

\n\n

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

\n\n

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

\n\n

jsFiddle

\n\n

这是工作修复的jsFiddle 。

\n\n

CSS

\n\n

.widget.hover .divButtons { display:block; }\xe2\x80\x8b\n

\n\n

jQuery

\n\n

// We use this rather than :hover as :hover didn\'t always work in ie\n$(\'.column\').hover(function() {\n    $(this).addClass(\'hover\');\n}, function() {\n    $(this).removeClass(\'hover\');\n});\n\n// This is our base widget hover code\n$(\'.widget\').hover(function() {\n    $(\'.widget.hover\').removeClass(\'hover\');\n    $(this).addClass(\'hover\');\n}, function() {\n    $(this).removeClass(\'hover\');\n});\n

\n\n

jQuery 可排序调用

\n\n

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

\n\n

我希望这对你有用。

\n\n

令人恼火的是，2012 年我们仍然必须做出如此困难的解决方案，因为 IE 版本存在此类错误。

\n