鼠标悬停在其上方的突出显示的单元格

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

在您的情况下为.cells 是 <td>。因此，您的CSS应该是：

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

Answer 2

您是否尝试过.headers:hover{ background-color: #FF0000; }