如何将鼠标悬停在颜色上以悬停在Bootstrap中的表格上？

Question

我有一个表'table-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

这是imo最简单的方法,它对我有用.

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

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

Answer 3

这对我有用:

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

Answer 4

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

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

代码

<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 的背景颜色将更改为 #D1D119

日

tbody 也会发生同样的动作

.table-hover tbody tr:hover td