选定行的悬停禁用引导表答案

【问题标题】：Bootstrap table on hover disable for selected row选定行的悬停禁用引导表
【发布时间】：2015-04-11 02:03:07
【问题描述】：

我正在使用引导程序来实现表格行的悬停效果。但是我想在选择表格行时删除悬停效果。 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;
}

HTML：

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

Bootstrap 在悬停时以td 背景为目标，而不是tr。

这行得通：

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

Demo Fiddle

【讨论】：

这对我来说适用于 Bootstrap 3.3 和 Angular 1.5。我在我的 ng-repeat 行中使用 ng-class="{selected: selectedTable == tbl}" 属性来突出显示，并且悬停覆盖了选择。将 select-row 更改为选定 Jack 的修复后解决了我的问题。
Bootstrap 4 的目标是 tr 本身，而不是其中的 td。

【解决方案2】：

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

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

然后您可以对每个要显式禁用的<tr> 使用tableRowHoverOff 类。

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

【讨论】：

【解决方案3】：

jquery解决这个问题

$('tr').select(function()
{    
 $(this).removeClass('classtoremove'); 
});

您现在可以将 .css 方法应用于 $(this) 对象

【讨论】：

OP 没有询问text selection，因此 jquery select 方法不适用于此处。此外，没有要删除的类。