css - tr:hover not working

Question

I'm trying to highlight (change background color) of the entire row when the mouse is hovering on a table row. I searched through the Net and it should be working, but it doesn't. I'm displaying it on Chrome.

<table class="list1">
<tr>
   <td>1</td><td>a</td>
</tr>
<tr>
   <td>2</td><td>b</td>
</tr>
<tr>
   <td>3</td><td>c</td>
</tr>
</table>

my css:

.list1 tr:hover{
background-color:#fefefe;
}

The correct css should be:

.list1 tr:hover td{
background-color:#fefefe;
}

//--this css for the td keeps overriding the one i showed earlier
.list1 td{
background-color:#ccc000;
}

Thanks for the feedback guys!

Answer 1

Your best bet is to use

table.YourClass tr:hover td {
background-color: #FEFEFE;
}

Rows aren't fully support for background color but cells are, using the combination of :hover and the child element will yield the results you need.