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;
}

Demo Fiddle

Answer 2

Jack的解决方案对我不起作用（Chromium 62.0.3202.94）。我发现工作是使用CSS bundle.request.url += '&' + jQuery.param(bundle.action_fields);选择器的东西。因此，您将类:not()作为表的类来启用花式鼠标悬停效果。它在CSS文件中定义为

tableRowHover

然后您可以为要显式禁用它的每个.tableRowHover tbody tr:not(.tableRowHoverOff):hover td { .... }使用课程tableRowHoverOff。

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

Answer 3

jquery解决这个问题

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

现在可以将.css方法应用于$（this）对象

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

3 个答案:

Demo Fiddle