Як змінити наведення курсору на колір для наведення курсору на стіл у Bootstrap?

У мене є таблиця з класом 'наведення столу'. За замовчуванням курсор на колір - білий / світло-сірий. Як змінити цей колір?

Я спробував перезаписати типовий засіб, додавши наступне до моєї домінуючої таблиці стилів

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

На жаль, вищезгадане не працює

Спробуйте:

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

Це працювало для мене:

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

Це був найпростіший спосіб зробити це imo, і він працював на мене.

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

Не впевнені, чому ви хочете змінити колір заголовка на той самий колір наведення курсора, що й рядки, але якщо ви це зробите, ви можете використовувати вищезазначені рішення. Якщо ви просто хочете т

Це для 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;

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

колір тла зміниться на # D1D119

го

Такі ж дії відбудуться і з tbody

.table-hover tbody tr: hover td

спробуйте:

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

Для мене @ pvskisteak5 відповідь викликала "ефект мерехтіння". Щоб виправити це, додайте наступне:

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

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

це найкраще рішення, на яке я можу зібратись дотепер. воно прекрасно працює в такій сцені

Замість того, щоб змінювати клавішу наведення таблиці за замовчуванням, створіть новий клас (інший) та застосуйте його до таблиці, для якої вам потрібен цей ефект.

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

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

Спробуйте Bootstrap в .table-hoverклас для реалізації hoverable рядків , наприклад ,

<table class="table table-hover">
  ...
</table>