如何在Bootstrap中将鼠标hover在表上hover在表上？

我有一个class级'表hover'表。 hover在颜色上的默认值是白色/浅灰色。 我该如何改变这种颜色？

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

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

不幸的是，上述不起作用

Answer 1

试试这个：

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

Answer 2

这对我工作：

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

Answer 3

这是最简单的方法来做到这一点，它为我工作。

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

不知道为什么你想要将标题颜色改为与行相同的hover颜色，但如果你这样做，那么你可以使用上述的解决scheme。 如果你只是想要t

Answer 4

这是通过grunt或其他任务运行器编译的bootstrap v4

您需要更改$table-bg-hover来设置$table-bg-hover时的高亮

 $table-cell-padding: .75rem !default; $table-sm-cell-padding: .3rem !default; $table-bg: transparent !default; $table-bg-accent: rgba(0,0,0,.05) !default; $table-bg-hover: rgba(0,0,0,.075) !default; $table-bg-active: $table-bg-hover !default; $table-border-width: $border-width !default; $table-border-color: $gray-lighter !default; 

Answer 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>[e-mail]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[e-mail]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[e-mail]</td> </tr> </tbody> 

CSS代码

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

CSS代码表明：

鼠标hover在行上：

.table-hover> thead> tr：hover

th的背景颜色将变为＃D1D119

日

tbody也会发生同样的情况

.table-hover tbody tr：hover td

Answer 6

尝试：

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

Answer 7

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

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