web-dev-qa-db-fra.com

Comment changer la couleur de survol d'une table de survol 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 les éléments suivants à ma feuille de style dominante

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

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

twitter-bootstrap
91
Lloyd Banks

Essayez ceci:

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

Cela a fonctionné pour moi:

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

C'était la façon la 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 titre pour la même couleur de survol que les lignes mais si vous le faites, vous pouvez utiliser les solutions ci-dessus. Si vous voulez juste t

10
frankie4fingers

Ceci est pour bootstrap v4 compilé via grunt ou un autre coureur de tâche

Il vous faudrait changer $table-bg-hover pour activer le survol

$table-cell-padding:            .75rem !default;
$table-sm-cell-padding:         .3rem !default;

$table-bg:                      transparent !default;
$table-bg-accent:               rgba(0,0,0,.05) !default;
$table-bg-hover:                rgba(0,0,0,.075) !default;
$table-bg-active:               $table-bg-hover !default;

$table-border-width:            $border-width !default;
$table-border-color:            $gray-lighter !default;
2
styks

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

CODE CSS 

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

Le code css indique que:

souris sur la ligne:

.table-hover> thead> tr: hover

La couleur de fond de th passera à # D1D119

th

Même action pour tbody

.table-hover tbody tr: survolez td

2
Tanvir Rahman

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;
            }
1
dude

essayer:

.table-hover > tbody > tr.active:hover > th {
                background-color: #color;
            }
1
Samuel Burgener
.table-hover tbody tr:hover td {
    background: aqua;
}

c’est la meilleure solution que je puisse faire jusqu’à présent.

0
Dennis

Au lieu de changer la classe table-hover par défaut, créez une nouvelle classe (anotherhover) et appliquez-la à la table pour laquelle vous avez besoin de cet effet. 

Code comme ci-dessous;

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