Internet Explorer：悬停样式卡在 jQuery 可排序元素上答案

【问题标题】：Internet Explorer :Hover style getting stuck on jQuery sortable elementInternet Explorer：悬停样式卡在 jQuery 可排序元素上
【发布时间】：2012-10-21 10:31:21
【问题描述】：

所以我有一个带有 jquery-sortable LI 的 UL。每个 LI 都有一个与之关联的 :Hover CSS 样式。当我将一个 LI 拖离 UL 并放开时，问题就出现了，悬停效果仍然适用于 IE9（chrome 工作正常）。

HTML

<ul id="test">
<li>test</li>
<li>test 2</li>
</ul>

CSS

#test li:hover{
background-color:Yellow;}

Javascript

$("#test").sortable();

参见小提琴： http://jsfiddle.net/hBhZD/2/

我看到了以下 SO 问题： IE9 not removing :hover style on DOM change 。这似乎与我遇到的问题相同，但如果可能的话，我想避免使用 jQuery 来强制更改样式。

有人知道如何用 CSS 解决这个问题吗？

【问题讨论】：

如果你已经在使用jQuery，为什么不想用它来修复呢？
一个公平的问题。我想使用 CSS (:hover) 中存在的功能来设置页面样式，而不是增加运行脚本来处理样式所涉及的额外开销。更不用说 CSS 方法提高了可读性和可维护性。

标签： jquery css internet-explorer jquery-ui-sortable

【解决方案1】：

根据我的研究和我发现的缺乏基于 CSS 的答案，似乎纯 CSS 无法克服这个 IE 错误（如果有人发现了其他问题，请证明我错了！）。这是我使用的基于 jQuery 的解决方法（如果您想知道的话）：

function toggleTabHover(tabName, hoverStatus) {
    var element = $('#'+tabName);

    if (element.hasClass('selectedTab')) {
        return;
    }

    if (hoverStatus === "on") {
        element.addClass('tabHoverOn');
        element.removeClass('tabHoverOff');
    }
    else {
        element.addClass('tabHoverOff');
        element.removeClass('tabHoverOn');
    }
}

您传入要悬停的选项卡名称以及要切换到的“开”/“关”状态。 selectedTab 类用于已单击的选项卡（我不希望将悬停影响应用于活动选项卡）。

【讨论】：

【解决方案2】：

使用helper 选项在拖动时克隆对象；这样做会强制 IE8 在释放对象后重新绘制对象，从而重置悬停状态。

$("#test").sortable({
    helper: 'clone'
});

【讨论】：