css hover on a table row not working

Question

I am trying to achieve a hover effect on a table row and I have the following code on my css.

.datatable tr.row:hover, .datatable tr.altrow:hover {
    color: #000;
    background-color: #FFFACD;
    background-image: url(../Images/bullet.gif);
    background-repeat: no-repeat;
}

But I do not see that being applied at all. My questions are

1. Why is it not working?
2. How to correct this?

For clarity here is the fiddle http://jsfiddle.net/naveen/UPhRE/
Please don't mind the images inside the css. All is well there.

Answer 1

You are setting backgrounds on the individual table cells (td), which is rendered on top of the tr.

If you have two choices:

1) Move all row background styling to the trs.

2) Update your CSS to look like this:

.datatable tr.row:hover td, .datatable tr.altrow:hover td {
    color: #000;
    background-color: #FFFACD;
    background-image: url(../Images/bullet.gif);
    background-repeat: no-repeat;
}

This will render the color on the row: http://jsfiddle.net/R9YGw/3/

Update: Included update for image on first cell only:

.datatable tr.row:hover td, .datatable tr.altrow:hover td {
    color: #000;
    background-color: #FFFACD;
}
.datatable tr.row:hover td:first-child, .datatable tr.altrow:hover td:first-child {
    background-image: url(../Images/bullet.gif);
    background-repeat: no-repeat;
}

Answer 2

The problem you have is that you set a background color on the td elements, which are further down the DOM tree and thus the color of these takes precedence.

If you apply the color to just the row you will see the hover appearing:

.datatable .row
{
    background-color: #FFFFFF;
}
.datatable .altrow
{
    background-color: #EDF5FF;
}