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

Question

我的网页上有以下代码。它迭代一个列表，创建新的单元格，并根据标准将一个 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”中定义的颜色。只有未分配类别的单元格才会在悬停时改变颜色:

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

Answer 1

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

.list th:hover, .list tr:hover { 变成
.list th:hover, .list tr:hover, .list tr:hover td.raw {