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