Come faccio a modificare il colore del passaggio del mouse sul tavolo in Bootstrap?

Ho un tavolo con classe "table-hover". Il colore predefinito al passaggio del mouse è un bianco / grigio chiaro. Come cambio questo colore?

Ho provato a sovrascrivere l'impostazione predefinita aggiungendo quanto segue al mio foglio di stile dominante

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

Sfortunatamente, quanto sopra non funziona

Provalo:

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

Questo ha funzionato per me:

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

Questo è stato il modo più semplice per farlo imo e ha funzionato per me.

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

Non sono sicuro del motivo per cui vorresti cambiare il colore dell'intestazione con lo stesso colore al passaggio del mouse delle righe, ma se lo fai, puoi utilizzare le soluzioni di cui sopra. Se vuoi solo t

Questo è per bootstrap v4 compilato tramite grunt o qualche altro task runner

Dovresti cambiare $table-hover-bgper impostare l'evidenziazione al passaggio del mouse

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

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

CODICE CSS

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

Il codice css indica che:

mouse sulla riga:

.table-hover> thead> tr: hover

il colore di sfondo di th cambierà in # D1D119

esimo

La stessa azione accadrà per tbody

.table-hover tbody tr: hover td

provare:

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

Per me @ pvskisteak5 la risposta ha causato un "effetto tremolante". Per risolvere questo problema, aggiungi quanto segue:

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

questa è la migliore soluzione che posso gice finora. funziona perfettamente in tale scena

Invece di modificare la classe di hover della tabella predefinita, crea una nuova classe (anotherhover) e applicala alla tabella per cui hai bisogno di questo effetto.

Codice come sotto;

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

Prova la .table-hoverclasse di Bootstrap per implementare righe hoverable , ad esempio

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