选定行的悬停禁用引导表

Question

我正在使用 bootstrap 来为我的表格行提供悬停效果。但是我想在选择表格行时删除悬停效果。 I set a class (select-row) using JavaScript when a row is selected.似乎不适合我。我在 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;
}

网址：

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

原文由 MindGame 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为了让选中的行背景不发生变化，你需要专门覆盖现有的悬停样式。

Bootstrap 的目标是悬停时的 td 背景，而不是 tr 。

这有效：

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

演示小提琴

原文由 Jack 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Jack 的解决方案对我不起作用（Chromium 62.0.3202.94）。我发现工作的是使用 CSS :not() 选择器的东西。因此，您将类 tableRowHover 作为表格的类，以启用精美的鼠标悬停效果。它在 CSS 文件中定义为

.tableRowHover tbody tr:not(.tableRowHoverOff):hover td { .... }

然后你可以使用类 tableRowHoverOff 为每个 <tr> 你想要明确禁用它的地方。

小提琴演示：http: //jsfiddle.net/mk319zzm/

原文由 Axel Heider 发布，翻译遵循 CC BY-SA 3.0 许可协议