twitter-bootstrap 如何在 Bootstrap 中更改悬停在表格上的悬停颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15643037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I change the hover over color for a hover over table in Bootstrap?
提问by Lloyd Banks
I have a table with class 'table-hover'. The default hover over color is a white / light grey. How do I change this color?
我有一张桌子，上面有“桌子悬停”类。默认悬停颜色是白色/浅灰色。我如何改变这种颜色？
I've tried overwriting the default by adding the following to my dominant style sheet
我已经尝试通过将以下内容添加到我的主要样式表来覆盖默认值
.table-hover tbody tr:hover > th {
background-color: #D1D119;
}
Unfortunately, the above does not work
不幸的是，上述方法不起作用
回答by pvskisteak5
Give this a try:
试试这个：
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: #color;
}
回答by frankie4fingers
This was the most simple way to do it imo and it worked for me.
这是 imo 最简单的方法，它对我有用。
.table-hover tbody tr:hover td {
background: aqua;
}
Not sure why you would want to change the heading color to the same hover color as the rows but if you do then you can use the above solutions. If you just want t
不确定为什么要将标题颜色更改为与行相同的悬停颜色，但如果这样做，则可以使用上述解决方案。如果你只是想要
回答by user2683780
This worked for me:
这对我有用：
.table tbody tr:hover td, .table tbody tr:hover th {
background-color: #eeeeea;
}
回答by styks
This is for bootstrap v4 compiled via grunt or some other task runner
这是用于通过 grunt 或其他一些任务运行程序编译的 bootstrap v4
You would need to change $table-hover-bgto set the highlight on hover
您需要更改$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;
回答by Tanvir Rahman
HTML CODE:
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>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
CSS CODE
代码
.table-hover thead tr:hover th, .table-hover tbody tr:hover td {
background-color: #D1D119;
}
The css code indicate that:
css代码表明：
mouse over row:
鼠标悬停在行上：
.table-hover > thead > tr:hover
.table-hover > thead > tr:hover
background color of th will change to #D1D119
th 的背景颜色将更改为 #D1D119
th
日
Same action will happen for tbody
tbody 也会发生同样的动作
.table-hover tbody tr:hover td
.table-hover tbody tr:hover td
回答by Samuel Burgener
try:
尝试：
.table-hover > tbody > tr.active:hover > th {
background-color: #color;
}
回答by dude
For me @pvskisteak5 answer has caused a "flicker-effect". To fix this, add the following:
对我来说，@pvskisteak5 的答案造成了“闪烁效果”。要解决此问题，请添加以下内容：
.table-hover tbody tr:hover,
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th{
background:#22313F !important;
color:#fff !important;
}
回答by Dennis
.table-hover tbody tr:hover td {
background: aqua;
}
this is the best solution i can gice so far.it works out perfectly in such scena
这是迄今为止我能给出的最佳解决方案。它在这样的场景中完美运行
回答by Jens
Try Bootstrap's .table-hoverclass to implement hoverable rows, for example
尝试引导的.table-hover类来实现hoverable行，例如
<table class="table table-hover">
...
</table>
回答by MarcoZen
Instead of changing the default table-hover class, make a new class ( anotherhover ) and apply it to the table that you need this effect for.
不要更改默认的 table-hover 类，而是创建一个新类 ( anotherhover ) 并将其应用于需要此效果的表。
Code as below;
代码如下；
.anotherhover tbody tr:hover td { background: CornflowerBlue; }
