2

我有一个表格，其中的行具有交替的颜色。表格行上也有悬停效果。在 Windows 8 下的 IE10（以及 IE9 模式下）中，即使鼠标离开，悬停也经常保持。

这里是演示（只需将指针从上到下拖到表格上）：http: //jsfiddle.net/rapik/UF8kZ/

删除使行颜色交替的规则可以解决问题。

这是一个错误还是我做错了什么？

CSS 源代码：

/*
 * Alternating colors for rows.
 */
.table tbody tr:nth-child(odd) {
  background-color: #DDDDDD;
}

.table tbody tr:nth-child(even) {
  background-color: #EEEEEE;
}

/*
 * Hover effect for rows.
 */
.table tbody tr:hover {
  background-color: red;
}
4

2 回答 2

2

这是您遇到的一个相当有趣的问题。一个直接的解决方案是将注意力从tr元素转移到其td子元素：

.table tbody tr:nth-child(odd) {
    background-color: #DDDDDD;
}
.table tbody tr:nth-child(even) {
    background-color: #EEEEEE;
}
.table tbody tr:hover td {
    background-color: blue;
}

这解决了问题，但可能不足以满足所有情况。我将继续对此进行试验，看看是否可以确定更具体的细节。

更新：

所以我怀疑这可能与具有display: table-row. 我能够创建一个span元素，应用适当的display规则，并复制相同的问题。

进一步实验：http: //jsbin.com/asazah/2

于 2013-01-04T15:34:21.497 回答
2

当动态创建 html 时，我也遇到了类似的问题，即 IE10 无法tr:hover正确显示（但 IE10 似乎确实可以与静态定义的 html 一起正常工作）。

    div.MenuPanel table tr.MenuOption:hover {
        background-color: rgb(245,245,245); 
    }

 /* work around to get correct display in IE10 */
    div.MenuPanel table tr.MenuOption:hover td {
        background-color: rgb(245,245,245); 
    }

上述解决方法（使用 td 添加第二个声明）解决了问题！！似乎是 IE10 中的一个错误。如果没有第二个声明，有时该行会突出显示，有时则不会（即始终随机间歇）。

于 2013-05-01T02:39:40.920 回答