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 tr s.

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

Answer 3

You can hover it, actually, but it won't work great in older IE's. Your problem is that your initial (non-hover) color is assigned to the TD elements, not the TRs. Modify your CSS so it does this:

.datatable tr.row:hover, .datatable tr.altrow:hover
.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;
}

And it works okay. Not sure how the image part will look in each TD though, so you may need to do more tweaks for that part.