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指定为颜色。

基本上，我需要的是删除某些行上的悬停效果。有没有办法做到这一点？

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的悬停颜色。

Answer 2

由于您需要在应用悬停效果的行方面更具选择性，因此创建自己的CSS悬停效果可能更容易，而不是使用bootstrap的table-hover类。

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

您可以使用以下CSS（使用非选择器）在悬停时将背景颜色应用于没有特定类的表行。

CSS：

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

Answer 3

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

依此类推，我想说......

Bootstrap表行悬停，但有一些行的例外

3 个答案: