Jak zmienić kolor najechania kursorem na kolor tabeli w Bootstrap?

Mam stół z klasą „najechanie na stół”. Domyślny kolor najechania kursorem na kolor to biały / jasnoszary. Jak zmienić ten kolor?

Próbowałem nadpisać domyślne, dodając następujące elementy do mojego dominującego arkusza stylów

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

Niestety powyższe nie działa

Spróbuj:

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

To zadziałało dla mnie:

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

To był najprostszy sposób na zrobienie tego imo i zadziałał dla mnie.

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

Nie jestem pewien, dlaczego chcesz zmienić kolor nagłówka na ten sam kolor co wiersze, ale jeśli to zrobisz, możesz użyć powyższych rozwiązań. Jeśli chcesz tylko t

To jest dla bootstrap v4 skompilowanego przez grunt lub inny program do uruchamiania zadań

Musisz zmienić, $table-hover-bgaby ustawić podświetlenie po najechaniu kursorem

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

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

KOD CSS

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

Kod css wskazuje, że:

mysz nad wierszem:

.table-hover> thead> tr: hover

kolor tła th zmieni się na # D1D119

th

To samo stanie się dla wszystkich

.table-hover tbody tr: hover td

próbować:

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

Dla mnie odpowiedź @ pvskisteak5 spowodowała "efekt migotania". Aby to naprawić, dodaj następujące elementy:

            .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;
}

to jest najlepsze rozwiązanie, jakie do tej pory mogę zrobić. sprawdza się idealnie w takiej scenie

Zamiast zmieniać domyślną klasę zawisu w tabeli, utwórz nową klasę (anotherhover) i zastosuj ją do tabeli, dla której potrzebujesz tego efektu.

Kod jak poniżej;

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

Wypróbuj na przykład .table-hoverklasę Bootstrap, aby zaimplementować wiersze , które można aktywować

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