选中行时禁用Bootstrap表格的悬停效果

Question

我正在使用Bootstrap为我的表格行设置悬停效果。但是，当选择表格行时，我想要移除悬停效果。我使用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>

- MindGame

Answer 1

为了让选定的行背景不改变，您需要特别覆盖现有的悬停样式。

Bootstrap 对悬停时的 td 背景进行目标设置，而非 tr。

以下代码可行：

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

演示代码

- Jack

---

这适用于我使用 Bootstrap 3.3 和 Angular 1.5。我在 ng-repeat 行中使用了 ng-class="{selected: selectedTable == tbl}" 属性进行高亮，并且悬停会覆盖选择。将 select-row 更改为 selected 后，Jack 的修复解决了我的问题。 - osullivj

Bootstrap 4 的目标是 tr 本身，而不是其中的 td。 - Leith

Answer 2

在 Bootstrap v5 中，您需要在 <td> 元素上设置 box-shadow: none 来覆盖悬停行为。

我花了很长时间才弄清楚为什么没有 :hover 伪类的 background-color 规则。他们应用了一种无限嵌套的内部框阴影来模拟背景色的变化，而不是实际上覆盖它。

- Márton Tamás

---

这是黑客风格。百分之百有效。 - Johan

Answer 3

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

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

然后，您可以为每个需要明确禁用的<tr>使用类tableRowHoverOff。

Fiddle演示：http://jsfiddle.net/mk319zzm/

- Axel Heider

Answer 4

解决此问题的jQuery方案

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

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

- user3412566

---

OP并没有询问“文本选择”，因此jQuery的“select”方法在这里不适用。另外，也没有要移除的类。 - Jack