选定行的悬停禁用引导表

Posted 2023-05-08

【中文标题】选定行的悬停禁用引导表

【英文标题】：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>

【参考方案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 方法不适用于此处。此外，没有要删除的类。