使用 CSS，如何根据我悬停的单元格更改表格行的背景颜色？

Posted 2023-03-06

【中文标题】使用 CSS，如何根据我悬停的单元格更改表格行的背景颜色？

【英文标题】：Using CSS, how can I change the background color of a table row depending on the cell I hover over?

【发布时间】：2011-11-17 08:21:22

【问题描述】：

我的网页上有以下代码。它迭代一个列表，创建新的单元格，并根据一个标准将一个 css 类分配给一个新的表格单元格（假设类 .raw 分配给一些单元格）：

<tr class="$(i % 2) == 0 ? 'odd' : 'even'">
     <g:each in="$params.classProperties" status="cnt" var="classProperty">
          <td class="$classProperty.name.contains('raw')?'raw':'normal'">$fieldValue(bean: billTemplateInstance, field: classProperty.name)</td>
     </g:each>
</tr>

如果一个单元格被分配了 .raw 类，我设置单元格的背景颜色。现在，我想在悬停时更改一行的整个背景颜色。我尝试将以下行添加到我的 css 文件中...

.list td.raw 
    background: #CCFFBF;


.list th:hover, .list tr:hover 
    background: #b2d1ff;

不幸的是，在悬停时，具有 .raw 类的单元格的背景颜色仍与“.list td.raw”中定义的一样。只有未分配类的单元格在悬停时会改变颜色：

感谢所有帮助和建议。 :)

【问题讨论】：

当单元格的行悬停时，您总是希望将其颜色更改为蓝色，对吧？

尝试指定:hover风格background: #b2d1ff !important;

@Nightfirecat：不完全-.list td.raw 和.list tr:hover 具有相同的特异性，所以理论上第二条规则应该覆盖。我怀疑这与tr 和td 元素有关...

啊，你是对的 - 我的错。

【参考方案1】：

尝试向链中添加另一个选择器：

.list th:hover, .list tr:hover 变为.list th:hover, .list tr:hover, .list tr:hover td.raw

【讨论】：

.list th:hover 选择器可能不是必需的，除非您希望在悬停时更改标题行的颜色。

没错，我也在更改列标题的颜色。