当鼠标悬停在单元格上时突出显示单元格答案

【问题标题】：highlighting cell when mouse hovers over it当鼠标悬停在单元格上时突出显示单元格
【发布时间】：2020-08-13 23:25:49
【问题描述】：

当鼠标悬停在表格单元格上时，我希望表格单元格突出显示/更改背景颜色。

这是样式的声明

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

这不会导致表格单元格在悬停时改变背景颜色。有什么想法吗？

【问题讨论】：

我觉得你的选择器不正确，试试td.cells:hover

标签： css html-table styles background-color

【解决方案1】：

您是否尝试过添加此样式：

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

请试试这个sn-p

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

【讨论】：

【解决方案2】：

在你的情况下.cells 是<td>。所以你的CSS 应该是：

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

【讨论】：