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

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

对于每个有兴趣如何使其工作的人,我找到了一种解决方案,它可以消除悬停效果,而无需为每种使用的颜色指定单独的悬停颜色.

这里的关键点是在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 类更容易。

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

CSS：

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