Bootstrap 引导表行悬停,但某些行例外

q9rjltbz  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(4)|浏览(170)

我有一个支持通过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为颜色也不起作用。
本质上,我需要的是删除某些行上的悬停效果。有什么方法可以做到这一点吗?

hkmswyz6

hkmswyz61#

对于每个感兴趣的人如何让这个工作,我发现了一个解决方案,它的工作与消除悬停效果没有指定一个单独的悬停颜色为每种颜色在使用中。
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;
}

继承的是树的颜色。
不幸的是,我手边没有一个IE来测试它的行为。
当您在表格的某些行中使用自定义颜色,而其余行应该是Bootstrap的默认颜色时,这一点特别有用。这样您就不必复制Bootstrap的悬停颜色。

20jt8wwn

20jt8wwn2#

由于您需要更好地选择要将悬停效果应用到哪些行,因此创建自己的CSS悬停效果可能比使用bootstrap的table-hover类更容易。
演示(感谢dfsq提供的基础):http://plnkr.co/edit/INuppBzm7r4r7bqvCJm5?p=preview
您可以使用以下CSS(不使用选择器)将悬停时的背景颜色应用于没有特定类的表格行。
CSS:

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

mccptt673#

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

等等,我会说...

rggaifut

rggaifut4#

我只能通过设置一个非悬停背景颜色,并在**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;
}

相关问题