Comment changer la couleur de survol d'un tableau dans Bootstrap?

J'ai une table avec la classe «table-hover». La couleur de survol par défaut est un blanc / gris clair. Comment changer cette couleur?

J'ai essayé d'écraser la valeur par défaut en ajoutant ce qui suit à ma feuille de style dominante

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

Malheureusement, ce qui précède ne fonctionne pas

Essayez ceci:

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

Cela a fonctionné pour moi:

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

C'était le moyen le plus simple de le faire et cela a fonctionné pour moi.

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

Vous ne savez pas pourquoi vous voudriez changer la couleur de l'en-tête pour la même couleur de survol que les lignes, mais si vous le faites, vous pouvez utiliser les solutions ci-dessus. Si tu veux juste t

Ceci est pour bootstrap v4 compilé via grunt ou un autre exécuteur de tâches

Vous devrez changer $table-hover-bgpour définir la surbrillance en survol

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

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

CODE CSS

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

Le code css indique que:

passez la souris sur la ligne:

.table-hover> thead> tr: hover

la couleur d'arrière-plan deviendra # D1D119

e

La même action se produira pour le corps

.table-hover tbody tr: hover td

essayer:

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

Pour moi, @ pvskisteak5 a provoqué un "effet de scintillement". Pour résoudre ce problème, ajoutez ce qui suit:

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

c'est la meilleure solution que je puisse trouver à ce jour.cela fonctionne parfaitement dans un tel scénario

Au lieu de modifier la classe de survol de table par défaut, créez une nouvelle classe (un autre déplacement) et appliquez-la à la table pour laquelle vous avez besoin de cet effet.

Code comme ci-dessous;

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

Essayez la .table-hoverclasse de Bootstrap pour implémenter des lignes hoverables , par exemple

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