Wie ändere ich den Hover-Over-Farbton für einen Hover-Over-Tisch in Bootstrap?

106

Ich habe einen Tisch mit der Klasse 'table-hover'. Der Standard-Hover über der Farbe ist Weiß / Hellgrau. Wie ändere ich diese Farbe?

Ich habe versucht, die Standardeinstellung zu überschreiben, indem ich meinem dominanten Stylesheet Folgendes hinzugefügt habe

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

Leider funktioniert das oben nicht

twitter-bootstrap Lloyd Banks
quelle

Antworten:

231

Probieren Sie es aus:

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #color;
}
pvskisteak5
quelle
4
Warum wird das tdbenötigt? (Entschuldigung, ich bin bei
CSS
6
@AlexanderDerck Ich nehme an, dies könnte etwas spät sein, aber das td wird benötigt, weil es weiter unten in der Zeile von der Zeile liegt. Wenn bereits ein Hintergrund auf das td angewendet wurde, wird der Hintergrund der Zeile nicht angezeigt, weil es ' Ich werde nach der Reihe gemalt.
Palu Macil
18

Das hat bei mir funktioniert:

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

Dies war der einfachste Weg, es imo zu machen und es hat bei mir funktioniert.

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

Sie sind sich nicht sicher, warum Sie die Überschriftenfarbe in dieselbe Schwebefarbe wie die Zeilen ändern möchten, aber wenn Sie dies tun, können Sie die oben genannten Lösungen verwenden. Wenn du nur t willst

frankie4fingers
quelle
6

Dies ist für Bootstrap v4, das über Grunt oder einen anderen Task Runner kompiliert wurde

Sie müssten ändern $table-hover-bg, um die Hervorhebung auf Hover zu setzen

$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;
Styks
quelle
1
Für alle , auf diese mit npm stolpern, dann ist es tatsächlich $table-hover-bg,$table-active-bg und so weiter, nicht $table-bg-.... Ich dachte, ich würde für eine Minute verrückt werden 😅
jaymz
5

HTML-CODE : 

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

CSS-CODE

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

Der CSS-Code gibt Folgendes an:

Maus über Zeile:

.table-hover> thead> tr: hover

Die Hintergrundfarbe von th ändert sich in # D1D119

th

Die gleiche Aktion wird für alle stattfinden

.table-hover tbody tr: hover td

Tanvir Rahman
quelle
Eine Erklärung würde helfen, Ihre Antwort besser zu verstehen.
Romano Zumbé
1

Versuchen:

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

Für mich hat @ pvskisteak5 Antwort einen "Flickereffekt" verursacht. Fügen Sie Folgendes hinzu, um dies zu beheben:

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

Dies ist die beste Lösung, die ich bisher finden kann. In einer solchen Szene funktioniert es perfekt

Dennis
quelle
0

Anstatt die Standard-Table-Hover-Klasse zu ändern, erstellen Sie eine neue Klasse (Anotherhover) und wenden Sie sie auf die Tabelle an, für die Sie diesen Effekt benötigen.

Code wie unten;

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

Versuchen Sie Bootstrap die .table-hoverKlasse zu implementieren hoverable Reihen , zum Beispiel

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