116

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

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

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

不幸的是，以上不起作用

4

13 回答 13

259

试试这个：

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #color;
}
于 2013-03-26T17:05:02.397 回答
21

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

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

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

于 2014-06-30T15:37:47.170 回答
18

这对我有用：

.table tbody tr:hover td, .table tbody tr:hover th {
    background-color: #eeeeea;
}
于 2013-10-03T19:01:11.603 回答
6

这适用于通过 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;
于 2016-11-15T16:04:06.687 回答
6

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

th

tbody 也会发生同样的动作

.table-hover tbody tr:hover td

于 2015-08-06T11:24:06.143 回答
2 
.table-hover tbody tr:hover td {
    background: #ffffff;
}
于 2020-10-11T13:39:05.480 回答
1

尝试：

.table-hover > tbody > tr.active:hover > th {
                background-color: #color;
            }
于 2015-03-13T13:49:38.787 回答
1

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

            .table-hover tbody tr:hover,
            .table-hover tbody tr:hover td,
            .table-hover tbody tr:hover th{
                background:#22313F !important;
                color:#fff !important;
            }
于 2015-06-03T10:01:19.443 回答
1

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

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

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

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

于 2021-08-01T20:35:01.027 回答
1 
.table-hover tbody tr:hover td {
    background: aqua;
}

这是迄今为止我能想到的最好的解决方案。它在这样的场景中完美运行

于 2019-08-29T06:49:34.463 回答
0

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

  1. 原则性和简短的方法：使用 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";
  1. 使用 CSS 变量：
.table {
    --bs-table-hover-bg: #d00;
}

或者

#thetable tr:hover, #thetable tr td:hover {
   background-color: #d00;
}
于 2021-12-30T21:02:10.887 回答
0

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

代码如下；

.anotherhover tbody tr:hover td { background: CornflowerBlue; }
于 2018-04-23T09:52:43.807 回答
-1

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

<table class="table table-hover">
  ...
</table>
于 2020-04-15T04:51:48.760 回答