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

发布于 2024-12-04 09:10:29 字数 814 浏览 1 评论 0原文

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

在此处输入图像描述

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

原文

I have the following code on my web-page. It iterates a list, creates new cells, and assigns a css class to a new table cell based on a criterion (assume class .raw is assigned to some cells):

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

If a cell has been assigned the .raw class, I set the background color for the cell. Now, I wanted to change the entire background color of a row on hover. I tried adding the following lines to my css file...

.list td.raw {
    background: #CCFFBF;
}

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

Unfortunately, on hover, the background color of the cells with class .raw remains as it was defined in ".list td.raw". Only cells which have not been assigned a class change color on hover:

enter image description here

Appreciate all help and suggestions. :)

分享到QQ

分享到微博