Question

我使用引导程序和数据表。

我创建了此类。

.nonCompliant{
    background: #de5d5d;
}

它放在表的某一行的tr上。

当显示不兼容的类并悬停事件时，想要添加另一种颜色

尝试

table#samplesTestsTable.dataTable tbody tr:hover > .nonCompliant{
    background: #c11f1f;
}

和

tr:hover > .nonCompliant{
    background: #c11f1f;
}

没有很好的结果。

编辑该行的代码

<tr role="row" class="nonCompliant even"><td data-id="19475A" class="sorting_1" tabindex="0">190475A</td><td>2019-04-23</td></tr>

Answer 1

如果.nonCompliant类正在修改tr本身，则

.nonCompliant:hover {
   background: #c11f1f;
}

应该工作。否则，如果.nonCompliant位于tr的直接子元素上，例如td，

tr:hover .nonCompliant {
   background: #c11f1f;
}

或您正在使用的子选择器。

Answer 2

如果您将类直接应用于hr标记，则可以执行以下操作：

.someclass:hover{
  background-color: yellow;
}

<table>
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
</tr>
<tr>
<td class="someclass">
    Hello2
</td>
    <td>Lastname</th>
    <td>Age</th>
</tr>
</table>

否则，如果是直子，则可以这样做：

tr:hover .nonCompliant {
   background-color: yellow;
}

在CSS类上添加悬停

2 个答案: