Question

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.

Answer 1

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.