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

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

Probieren Sie es aus:

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

Das hat bei mir funktioniert:

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

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

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;

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

Versuchen:

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

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

.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

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

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

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