为什么CSS行悬停在表中交替行（在IE中）？

我有一张桌子上有交替颜色的行。表格行也存在悬停效果。在Windows 8下的IE10中（以及IE9模式），即使在鼠标不在的情况下，悬停往往仍然存在。为什么CSS行悬停在表中交替行（在IE中）？

这里演示（简单地拖动指针从上到下在表）：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; 
}

来源

2013-01-04 Andrej

适用于我：在Win7 64bit上的IE10。 – robertc

在IE9上它也可以正常工作。我也从来没有听说有人有这个问题。 –

感谢您的回复。我有Windows 8和IE 10.0.9200.164666，可能它与操作系统有关... – Andrej

这是一个非常有趣的问题，你遇到过。一个直接的解决方案是你的注意力从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-04 15:34:21 Sampson

感谢您的解决方案！我也可以看到你的例子的问题。我认为这是一个bug ...你有没有注意到，有时当光标移动得足够快时，甚至从“display：table-row”元素中清除悬停？ – Andrej

@Andrej我没有注意到 - 谢谢你指出。 – Sampson

我也曾经有过与IE10无法正确显示tr:hover的HTML动态创建时（但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-01 02:39:40

为什么CSS行悬停在表中交替行（在IE中）？

回答

相关问题