引导表格行悬停，但有一些例外的行

Question

我有一张支持悬停的表格，通过 class="table-hover" 实现。但是，我希望某些行（颜色不同）在悬停时不被突出显示。

我复制了 Bootstrap 的悬停规则，并将其调整为 tr.no-hover：

.table-hover tbody tr.no-hover:hover > td,
.table-hover tbody tr.no-hover:hover > th {
    background-color: inherit;
}

我的想法是这样，它应该显示行的原始颜色（即未悬停时的颜色），因为我希望no-hover通用地适用于不同颜色的行。但这并没有起作用。指定transparent也不行。

基本上，我需要在某些行上移除悬停效果。有没有什么方法可以做到这一点？

- omilke

---

请发布一个 Fiddle。 - Gildas.Tambo

看起来不错：http://plnkr.co/edit/G4lvVb0TPTwLsIwNVyd0?p=preview。 - dfsq

看起来我的想法还不错。不幸的是，这意味着我必须找出我的页面与提供的 Plunker 示例有何不同 :( 感谢 @dfsq - omilke

如果您希望进行选择，那么不使用Bootstrap的table-hover类，而是添加您自己的CSS以实现所需的悬停效果，是否会更容易些呢？ - Will

像这样吗？http://plnkr.co/edit/INuppBzm7r4r7bqvCJm5?p=preview - Will

Answer 1

以下是您需要翻译的内容：

对于所有对如何使其工作感兴趣的人，我找到了一种解决方案，可以通过删除悬停效果而不为使用中的每种颜色指定单独的悬停颜色来实现。

http://plnkr.co/edit/phGI6csBqmOXML1spLV4?p=preview

关键在于将自定义颜色设置为tr元素，这样单元格将被正确着色，并且还可以使用

.table-hover > tbody > tr.no-hover:hover > td,
.table-hover > tbody > tr.no-hover:hover > th {
    background-color: inherit;
}

继承的是tr颜色。

不幸的是，我没有IE可以测试其行为。

当您在某些表行中使用自定义颜色且其余部分应为Bootstrap的默认颜色时，这是特别有用的。这样，您不必复制Bootstrap的悬停颜色。

- omilke

---

好的，干净的解决方案！谢谢！ - rodamn

我不得不在你的CSS选择器中添加.table-hover tbody tr:hover。 - Thomas

Answer 2

由于您需要更加选择性地选择要应用悬停效果的行，因此创建自己的CSS悬停效果可能比使用bootstrap的table-hover类更容易。

演示（感谢dfsq提供基础）：http://plnkr.co/edit/INuppBzm7r4r7bqvCJm5?p=preview

您可以使用以下CSS（使用not选择器）在没有特定类的表格行上应用背景色悬停。

CSS：

tr:not(.no-hover):hover {
    background-color: green;
}

- Will

Answer 3

我只能通过设置无悬停背景颜色，并在tr和td类定义中使用它，才能使其与bootstrap配合使用。

<tr class='no-hover'><td class='no-hover'>Some Text</td></tr>

.no-hover {
   background-color: blue;
}

如果你想要指定悬停颜色，可以添加：

.table-hover tbody tr:not(.no-hover):hover td, .table-hover tbody tr:not(.no-hover):hover th {
    background-color: green;
}

- Aidan

Answer 4

.table-hover tbody tr.no-hover.success:hover > td,
.table-hover tbody tr.no-hover.success:hover > th {
    background-color: $brand-success;
}

.table-hover tbody tr.no-hover.warning:hover > td,
.table-hover tbody tr.no-hover.warning:hover > th {
    background-color: $brand-warning;
}

等等，我想说的是...

- Markus Kottländer

---

对我来说，这似乎需要付出太多的努力，因为这实际上需要为每种不同的颜色添加额外的悬停定义。 - omilke