highlighting cell when mouse hovers over it - css

Question

I want the table cells to highlight/change background colour when the mouse hovers over them.
Here is the declaration of the styles
.cells{
border-style:inset;
border-width:1px;
border-color:#06F;
background-color:#D6D6D6;
font-style: italic;
}
.cells td:hover{
background-color: #FF0000;
Here is the creation of the table:
<table class="table">
<tr>
<td></td>
<th colspan="5" class="specialCell">Cost Per Person</td>
</tr>
<tr>
<th class="specialCell">Party Size</th>
<th class="headers"><?php echo $titles[0] ?></th>
<th class="headers"><?php echo $titles[1] ?></th>
<th class="headers"><?php echo $titles[2] ?></th>
<th class="headers"><?php echo $titles[3] ?></th>
<th class="headers"><?php echo $titles[4] ?></th>
</tr>
<?php
for ($y=0; $y<$rows_needed; $y++){
echo '<tr>';
echo '<th class="headers">'.$column1[$y].'</th>';
for ($i=0; $i<5; $i++){
$newValue = $column1[$y] * $titles[$i];
echo '<td class="cells">'.$newValue.'</td>'; //THIS IS WHERE THE CLASS IS CALLED
}
echo '</tr>';
}
?>
</table>
This however does not cause the table cell to change background colour when hovered over. Any ideas?

Answer 1

In your case .cells is the <td>. So your CSS should be:
.cells:hover{
background-color: #FF0000;
}

Answer 2

have you tried to add this style:
.headers:hover{
background-color: #FF0000;
}
Please try this snippet
.headers:hover {
background-color: tomato;
cursor: pointer;
}
<table class="table">
<tr>
<td></td>
<th colspan="5" class="specialCell">Cost Per Person</td>
</tr>
<tr>
<th class="specialCell">Party Size</th>
<th class="headers">A</th>
<th class="headers">B</th>
<th class="headers">C</th>
<th class="headers">D</th>
</tr>
</table>