Question

I have a table styled like this: http://jsfiddle.net/naveen/SGQBF/

On hovering the trs, I would like to show a bullet at the first td or tr.
This is working as expected in Firefox. But in Chrome the bullet is being shown at every td.

My questions are

1. Whats wrong with my CSS?
2. How could I correct that?

Answer 1

I think that’s a bug.

Here is a work-around.

.datatable tr.row:hover, .datatable tr.altrow:hover {
    background-color: #FF0000;
    color: #000;
}

.datatable tr.row:hover td:first-child, .datatable tr.altrow:hover td:first-child {
    color: #000;
    background-color: #FF0000;
    background-image: url(http://quenshsolutions.ie/Images/bullet.gif);
    background-repeat: no-repeat;
    background-position: top left
}