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

小开

最佳答案

试试这个:

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

小开

This was the most simple way to do it imo and it worked for me.

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

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

小开

try:

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

小开

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

背景颜色将改为 # D1D119

这个

同样的动作会发生在尸体上

悬停在桌子上

小开

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

You would need to change $table-hover-bg to set the highlight on hover

$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;

小开

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

代码如下;

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

小开

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

这是目前为止我能想到的最好的解决办法了，在这种情况下效果很好

小开

Try Bootstrap’s .table-hover class to implement 可悬浮的行, for example

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

小开

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

小开

I've found that I have to overwrite a "CSS custom property" used by bootstrap that is called bs-table-accent-bg...

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

这条路径是 bootstrap 自己使用的，这是我在检查页面时得出的结论。

因为如果我做了其他解决方案所做的，我不能得到高亮成为 打火机比引导程序已经应用。这样，它工作(例如，我可以让悬停的颜色变浅)。

小开

You can do this in several ways,

原则和简单的方法: 在覆盖 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;
}