jQuery CSS AddClass - RemoveClass 在 Internet Explorer 中移动 div答案

【问题标题】：jQuery CSS AddClass - RemoveClass Shifts Divs In Internet ExplorerjQuery CSS AddClass - RemoveClass 在 Internet Explorer 中移动 div
【发布时间】：2012-10-15 11:28:42
【问题描述】：

我有一个 HTML 表格，并使用 jQuery 和 CSS 提供了一些悬停突出显示功能。我的悬停事件如下所示：

$('#' + element.id + ' tr:not(:first,[class="summary_row"])').die('mouseover mouseout').live('mouseover mouseout', function (event) {
            if (event.type == 'mouseover') {
                // do something on mouseover
                $(this).addClass("table_row_hover");
            } else {
                // do something on mouseout
                $(this).removeClass("table_row_hover");
            }
});

当鼠标移到相应的表格行时，我只是简单地添加和删除一个 CSS 类。我的 CSS 类（table_row_hover）很简单，只包含背景色和前景色：

.table_row_hover
{
    background-color: #660033;
    color: #FFFFFF;
}

在我的表格 div 下，还有另一个 div 包含一个分页器，为表格提供分页功能。当我将鼠标悬停在表格行上时，它会将此寻呼机 div 向下移动。每次我悬停时，它都会移动更多。这只发生在 Internet Explorer 中并且当表格 div 具有可见的水平滚动条时。（表格 div 具有属性溢出：自动；溢出-y：隐藏； -ms-溢出-y：隐藏；）。

有什么想法吗？

谢谢。

【问题讨论】：

你可以使用 hover 和 toggleClass 来减少你的代码长度..

标签： jquery html css internet-explorer-9

【解决方案1】：

live() 函数已弃用，因此请不要使用它。

$('#' + element.id + ' tr:not(:first,[class="summary_row"])').die('mouseover mouseout').on('mouseover mouseout', function (event) {
$(this).toggleClass("table_row_hover");

})

【讨论】：

【解决方案2】：

这是 Internet Explorer 中的一个已知错误。我找不到 Internet Explorer 的公开链接。错误是当元素中有水平滚动条时，它的高度会在 addClass/removeClass 上增加。微软显然也意识到了这个问题，因为它似乎已经在 Internet Explorer 10 中得到了解决。

【讨论】：

也许给他一些关于这个错误的文档？没有它就不是一个非常有用的答案吗？