выделение ячейки при наведении на нее курсора мыши

Question

Я хочу, чтобы ячейки таблицы выделяли / меняли цвет фона при наведении на них курсора мыши.

Вот объявление стилей

.cells{
    border-style:inset;
    border-width:1px;
    border-color:#06F;
    background-color:#D6D6D6;
    font-style: italic;
}
.cells td:hover{
    background-color: #FF0000;

Вот создание таблицы :

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

Это, однако, не приводит к изменению цвета фона ячейки таблицы при наведении курсора. Есть идеи?

Answer 1

Вы пытались добавить этот стиль:

.headers:hover{ 
  background-color: #FF0000; 
}

Пожалуйста, попробуйте этот фрагмент

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

Answer 2

В вашем случае .cells - это <td>. Таким образом, ваш CSS должен быть:

.cells:hover{
  background-color: #FF0000;
}