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

Antworten:


231

Probieren Sie es aus:

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

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

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


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;

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

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


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

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

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


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

0

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

<table class="table table-hover">
  ...
</table>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.