首页 文章

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

提问于
浏览 次
3

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

enter image description here

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

css html-table css-selectors hover

1 回答

  • 6

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

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

    回复于

相关问题