Question

I have noticed some weird behaviour in Chrome 15 and Safari regarding jquery hover events on a tablerow.

What is happening is that chrome is firing the off/on event when I move my mouse from one cell to the next (while in the same row). As the hover is attached to the table row I would expect the on/off events to only fire when moving on/off the row.

Please see my JSFiddle.

In the example, move the mouse to the point where one cell ends and another begins (where the colours change).

The events seem to fire correctly in IE and Firefox but not Safari and Chrome. Maybe it is a bug in webkit?

Answer 1

I definitely think this is a problem with webkit (makes sense as it is both chrome and safari).

I think I have a possible work around but there are some knock on effects:

Change your css for td:

td {
    background-color: #e0dffe;
    border: none;
    padding: 10px;
    position:relative;
    left:-1px;
}

This has the effect of pushing each td element left by 1 pixel removing the extra 1px that webkit seems to insert. As you will see this causes a problem on your borders so you will need to play around with your td:first-child, td:last-child css to get what you want in all browsers. I can’t see an easy answer.