Question

我试图通过在用户将鼠标悬停在其上时更改行的背景颜色来实现简单的表行悬停效果，这很简单：

tr:hover {
    background: red;
}

但是我注意到了chrome中的一个错误，其中一行中的单元格之间有一个小空格，我失去了:hover而<tr>在你移动它时打开/关闭了样式虽然我的鼠标还在排。

我已经尝试border-collapse: collapse，cellspacing="0"但是看不清楚为什么我在单元格之间丢失<tr>悬停，它只发生在单元格的任何一侧，而不是在单元格的上方/下方。它在Firefox中按预期工作。

这是一个JSFiddle，在Chrome中，尝试慢慢地将鼠标移动到第一个＆＃39;到第二个＆＃39;并且你会发现它们之间有一个非常薄的点，<tr>失去了它的悬停背景。

我已将此报告为Chromium bug here。

Answer 1

我不知道为什么会这样，但在<td>元素上设置定位似乎可以解决这个问题。

td {
    padding: 2px 5px;
    position:relative;
}