Как изменить цвет при наведении курсора на таблицу в Bootstrap?

106

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

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

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

К сожалению, это не работает

twitter-bootstrap Ллойд Бэнкс
источник

Ответы:

231

Попробуйте:

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #color;
}
pvskisteak5
источник
4
Зачем tdнужен? (извините, я никуда не
годен
6
@AlexanderDerck Я полагаю, это может быть немного поздно, но td необходим, потому что он находится дальше по dom от своей строки, и если к td уже применен фон, вы не увидите фон строки, потому что он ' Буду раскрашивать после ряда.
Palu Macil
18

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

.table tbody tr:hover td, .table tbody tr:hover th {
    background-color: #eeeeea;
}
user2683780
источник
18

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

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

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

frankie4fingers
источник
6

Это для bootstrap v4, скомпилированного с помощью grunt или другого средства запуска задач.

Вам нужно будет изменить, $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;
Стикс
источник
1
Для тех , кто спотыкаясь на этом , используя НПМ, это на самом деле $table-hover-bg,$table-active-bg и так далее, а не $table-bg-.... Подумал, что схожу с ума на минутку 😅
jaymz
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>

КОД CSS

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

Код css указывает, что:

мышь над строкой:

.table-hover> thead> tr: наведение

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

th

То же действие произойдет и с телом

.table-hover tbody tr: hover td

Танвир Рахман
источник
Некоторые пояснения помогут лучше понять ваш ответ.
Романо Зумбе
1

пытаться:

.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 
.table-hover tbody tr:hover td {
    background: aqua;
}

это лучшее решение, которое я могу найти до сих пор. он отлично работает в такой сцене

Деннис
источник
0

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

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

.anotherhover tbody tr:hover td { background: CornflowerBlue; }
MarcoZen
источник