html – 用于选定行的hover禁用引导表

我正在使用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>

解决方法

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

Bootstrap在hover而不是tr上定位td背景.

这有效：

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

Demo Fiddle