Question

所以我有一个带有jquery-sortable LI的UL。每个LI都有一个：与之关联的Hover CSS样式。当我将LI拖离UL并放手时，问题就出现了，Hover效果仍然在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修复此问题？

Answer 1

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

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

Answer 2

根据我的研究和缺乏基于CSS的答案，我发现，似乎这个IE漏洞是纯粹的CSS无法克服的（如果有人发现其他情况，请证明我错了！）。这是我使用的基于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类用于已单击的选项卡（我不希望将悬停效果应用于活动选项卡）。

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

2 个答案: