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

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

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

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

不幸的是，上述方法不起作用

试试看：

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

这对我有用：

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

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

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

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

这是通过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;

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

日

肢体也会发生相同的动作

.table-hover tbody tr：hover td

尝试：

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

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

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

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

这是迄今为止我能提供的最好的解决方案。

不必更改默认的表悬停类，而是创建一个新类（anotherhover）并将其应用于需要此效果的表。

代码如下；

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

尝试使用Bootstrap的.table-hover类来实现可悬停的行，例如

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