失去：在< tr>上悬停状态在Chrome中的< td>之间

问题描述：

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

I am trying to achieve a simple table row hover effect by changing the background colour of a row when a users hovers overs over it, that was simple enough:

tr:hover {
    background: red;
}

但是我注意到了一个在单元格之间有一个小空格在我输了：hover 和< tr> 在它，即使我的鼠标仍然在行。

However I have noticed a bug in chrome where there is a small space between cells in a row where I lose the :hover and the <tr> flicks the style on/off as you move over it even though my mouse is still on the row.

我尝试过 border-collapse：collapse ， cellspacing =0 / code>但不能看到为什么我失去了< tr> 悬浮在单元格之间，它只发生在单元格的两边，不在它们之上/之下。它在Firefox中正常工作。

I've tried border-collapse: collapse, cellspacing="0" but cannot see why I am losing the <tr> hover between cells, it only happens either side of cells, not above/below them. It works as expected in Firefox.

这里是一个 JSFiddle ，在Chrome中，尝试慢慢将鼠标从第一移动到第二，您会看到它们之间有一个非常薄的点，其中< tr> 失去悬停背景。

Here is a JSFiddle, in Chrome, try to slowly move your mouse from 'first' to 'second' and you will see there is a very thin point between them where the <tr> loses it's hover background.

我已将此报告为Chromium错误这里。

I have reported this as a Chromium bug here.

答

这工作，但设置在< td> 元素的位置似乎在Chrome中修复此问题。

I have no idea why this works, but setting the positioning on the <td> elements seems to fix this in Chrome.

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

jsFiddle示例 。

jsFiddle example.

失去：在< tr>上悬停状态在Chrome中的< td>之间

相关推荐