失去 :hover 状态在 <tr>在 Chrome 中的 <td> 之间 [英] Losing :hover status on <tr> between <td>'s in Chrome

问题描述

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;
}

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.

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.

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.

I have reported this as a Chromium bug here.

解决方案

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 example.

这篇关于失去 :hover 状态在 <tr>在 Chrome 中的 <td> 之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！