如何在 Bootstrap 中更改悬停在表格上的悬停颜色？答案

【问题标题】：How do I change the hover over color for a hover over table in Bootstrap?如何在 Bootstrap 中更改悬停在表格上的悬停颜色？
【发布时间】：2013-03-16 14:24:57
【问题描述】：

我有一张带有“table-hover”类的表格。默认悬停在颜色上的是白色/浅灰色。如何更改此颜色？

我尝试通过将以下内容添加到我的主要样式表中来覆盖默认值

.table-hover tbody tr:hover > th {
  background-color: #D1D119;
}

很遗憾，上述方法不起作用

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

试试这个：

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #color;
}

【讨论】：

为什么需要td？（对不起，我在 css 上一文不值，努力学习）
@AlexanderDerck 我想这可能有点晚了，但是 td 是需要的，因为它离 dom 的行更远，如果已经将背景应用于 td，那么您将不会看不到行的背景，因为它将在行之后绘制。
如果对您不起作用，请添加background-color: #color!important;

【解决方案2】：

这是 imo 最简单的方法，它对我有用。

.table-hover tbody tr:hover td {
    background: aqua;
}

不确定为什么要将标题颜色更改为与行相同的悬停颜色，但如果这样做，则可以使用上述解决方案。如果你只是想要 t

【讨论】：

【解决方案3】：

这对我有用：

.table tbody tr:hover td, .table tbody tr:hover th {
    background-color: #eeeeea;
}

【讨论】：

【解决方案4】：

这适用于通过 grunt 或其他一些任务运行程序编译的 bootstrap v4

您需要更改 $table-hover-bg 以在悬停时设置突出显示

$table-cell-padding:            .75rem !default;
$table-sm-cell-padding:         .3rem !default;

$table-bg:                      transparent !default;
$table-accent-bg:               rgba(0,0,0,.05) !default;
$table-hover-bg:                rgba(0,0,0,.075) !default;
$table-active-bg:               $table-hover-bg !default;

$table-border-width:            $border-width !default;
$table-border-color:            $gray-lighter !default;

【讨论】：

对于使用 npm 偶然发现此问题的任何人，它实际上是 $table-hover-bg, $table-active-bg 等等，而不是 $table-bg-...。以为我要疯了一分钟?

【解决方案5】：

HTML 代码：

<table class="table table-hover">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>

CSS 代码

.table-hover thead tr:hover th, .table-hover tbody tr:hover td {
    background-color: #D1D119;
}

css代码表明：

鼠标悬停在行上：

.table-hover > thead > tr:hover

th 的背景颜色将变为#D1D119

第

tbody 也会发生同样的动作

.table-hover tbody tr:hover td

【讨论】：

一些解释将有助于更好地理解您的答案。

【解决方案6】：

.table-hover tbody tr:hover td {
    background: #ffffff;
}

【讨论】：

【解决方案7】：

尝试：

.table-hover > tbody > tr.active:hover > th {
                background-color: #color;
            }

【讨论】：

【解决方案8】：

对我来说，@pvskisteak5 的回答引起了“闪烁效应”。要解决此问题，请添加以下内容：

            .table-hover tbody tr:hover,
            .table-hover tbody tr:hover td,
            .table-hover tbody tr:hover th{
                background:#22313F !important;
                color:#fff !important;
            }

【讨论】：

【解决方案9】：

.table-hover tbody tr:hover td {
    background: aqua;
}

这是迄今为止我能想到的最好的解决方案。在这样的场景中效果很好

【讨论】：

【解决方案10】：

我发现我必须覆盖引导程序使用的名为bs-table-accent-bg...的“CSS 自定义属性”...

.table-hover > tbody > tr:hover { --bs-table-accent-bg: #f8f8f8; }

路径是引导程序本身使用的。我是通过检查页面得出的。

因为如果我按照其他解决方案的做法进行操作，我无法使突出显示变得比已应用的引导程序更轻。这样，它就可以工作（即我可以让悬停颜色变浅）。

【讨论】：

【解决方案11】：

不要更改默认的 table-hover 类，而是创建一个新类 ( anotherhover ) 并将其应用于您需要此效果的表。

代码如下；

.anotherhover tbody tr:hover td { background: CornflowerBlue; }

【讨论】：

【解决方案12】：

您可以通过多种方式做到这一点，

原则和捷径：使用 sass 覆盖您需要的 sass 变量：

// Your variable overrides
$table-hover-bg: #d00; // what's that you need
$table-striped-bg: #fff;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

使用 CSS 变量：

.table {
    --bs-table-hover-bg: #d00;
}

或

#thetable tr:hover, #thetable tr td:hover {
   background-color: #d00;
}

【讨论】：

【解决方案13】：

尝试Bootstrap的.table-hover类实现hoverable rows，例如

<table class="table table-hover">
  ...
</table>

【讨论】：