延迟tr：使用Chrome进行悬停

Question

我注意到尝试使用tr:hover td在Chrome浏览器上突出显示一行（在版本26上测试）有一点延迟。

如果将光标快速移动到表格上，您会发现其下方的行尚未突出显示。

我正在使用这个css：

tr:hover td {
    background-color: transparent;
}

当你看到小延迟时，这是fiddel： http://jsfiddle.net/5VJ8n/89/

有什么办法可以解决吗？ 感谢。

Answer 1

这是webkit中的一个已知错误（for quite some time now）。如果将内容包装在divs中，然后在悬停中定位div，则可以获得一点速度提升。

<tr>
  <td><div>One</div></td>
  <td><div>Two</div></td>
  <td><div>Three</div></td>
</tr>

tr:hover div {
  color: #fff;
  background-color: #000;
}

Answer 2

这完全相同并完美运行：

td:hover, td:hover ~ td {
//css here
}