Как изменить наведение на цвет для наведения на таблицу в Bootstrap?

У меня есть таблица с классом 'table-hover'. По умолчанию наведите курсор на цвет-белый / светло-серый. Как изменить этот цвет?

Я попытался перезаписать значение по умолчанию, добавив следующее в мою доминирующую таблицу стилей

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

к сожалению, вышесказанное не работает

86
twitter-bootstrap

8 ответов

попробуйте:

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

это сработало для меня:

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

Это был самый простой способ сделать это, ИМО, и она работала для меня.

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

Не уверен, почему вы хотите изменить цвет заголовка на тот же цвет наведения, что и строки, но если вы это сделаете, вы можете использовать вышеуказанные решения. Если вы просто хотите, Т

9

Это для bootstrap v4, скомпилированного через grunt или какой-либо другой Task runner

вам нужно изменить $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;
2

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 указывает, что:

мыши на строку:

.стол-овер > элементы thead > тр:наведите

цвет фона th изменится на #D1D119

th

такое же действие произойдет для tbody

.стол-наведите элемента tbody тр:Ховер тд

2

попробуй:

.table-hover > tbody > tr.active:hover > th {
                background-color: #color;
            }
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;
            }
1

вместо изменения класса наведения таблицы по умолчанию создайте новый класс (anotherhover) и примените его к таблице, для которой вам нужен этот эффект.

код, как показано ниже;

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