悬停时的引导表禁用所选行

Question

我正在使用bootstrap来为我的表行设置on-hover效果.但是我想在选择表格行时删除悬停效果.我选择一行时使用JavaScript设置一个类(select-row).似乎不适合我.我正在使用CSS中的not子句.

我的css:

.table-hover > tbody > tr:not(.select-row):hover > td, 
.table-hover > tbody > tr:not(.select-row):hover > th {
    background-color: #f5fafe;
    color: black;
}

tr.select-row {
    background-color: #bddef9;
}

HTML:

<table class="table table-condensed table-hover">
   <tr>
       <td>xxx</td>
       <td>xxx</td>
   </tr>
</table>

Answer 1

为了不更改选定的行背景,您需要专门覆盖现有的悬停样式.

Bootstrap td以悬停而非目标为背景tr.

这有效:

.table-hover > tbody > tr.select-row:hover > td,
.select-row > td {
    background-color: #bddef9;
}

演示小提琴