highlighting cell when mouse hovers over it

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