4

所以我有一个带有 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 remove :hover style on DOM change。这似乎与我遇到的问题相同，但如果可能的话，我想避免使用 jQuery 来强制更改样式。

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

4

2 回答 2

2

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

$("#test").sortable({
    helper: 'clone'
});
于 2012-11-14T01:27:44.067 回答
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 类用于已单击的选项卡（我不希望将悬停影响应用于活动选项卡）。

于 2012-11-05T20:14:22.127 回答