Bagaimana cara mengubah warna hover over untuk tabel hover over di Bootstrap?

106

Saya memiliki meja dengan kelas 'table-hover'. Warna default hover over adalah putih / abu-abu muda. Bagaimana cara mengubah warna ini?

Saya sudah mencoba menimpa default dengan menambahkan berikut ini ke style sheet dominan saya

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

Sayangnya, cara di atas tidak berhasil

twitter-bootstrap Lloyd Banks
sumber

Jawaban:

231

Cobalah ini:

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #color;
}
pvskisteak5
sumber
4
Mengapa tddibutuhkan? (maaf saya tidak berharga di css, mencoba belajar)
Alexander Derck
6
@AlexanderDerck Saya kira ini bisa jadi agak terlambat, tetapi td diperlukan karena lebih jauh ke bawah dom dari barisnya, dan jika ada latar belakang yang sudah diterapkan ke td, maka Anda tidak akan melihat latar belakang baris karena itu ' Akan dicat setelah baris.
Palu Macil
18

Ini berhasil untuk saya:

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

Ini adalah cara paling sederhana untuk melakukannya dan berhasil untuk saya.

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

Tidak yakin mengapa Anda ingin mengubah warna tajuk ke warna hover yang sama seperti baris tetapi jika Anda melakukannya maka Anda dapat menggunakan solusi di atas. Jika Anda hanya ingin t

frankie4fingers
sumber
6

Ini untuk bootstrap v4 yang dikompilasi melalui grunt atau pelari tugas lainnya

Anda perlu mengubah $table-hover-bguntuk menyetel sorotan saat mengarahkan kursor

$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
sumber
1
Bagi siapa pun yang tersandung ini menggunakan npm, itu sebenarnya $table-hover-bg,$table-active-bg dan seterusnya, tidak $table-bg-.... Kupikir aku akan gila sebentar 😅
jaymz
5

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

KODE CSS

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

Kode css menunjukkan bahwa:

arahkan mouse ke baris:

.table-hover> thead> tr: hover

warna latar belakang th akan berubah menjadi # D1D119

th

Tindakan yang sama akan terjadi pada tbody

.table-hover tbody tr: hover td

Tanvir Rahman
sumber
Beberapa penjelasan akan membantu untuk memahami jawaban Anda dengan lebih baik.
Romano Zumbé
1

mencoba:

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

Bagi saya jawaban @ pvskisteak5 telah menyebabkan "efek flicker". Untuk memperbaikinya, tambahkan yang berikut ini:

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

ini adalah solusi terbaik yang bisa saya gice sejauh ini. itu bekerja dengan sempurna di scena tersebut

Dennis
sumber
0

Daripada mengubah kelas table-hover default, buat kelas baru (anotherhover) dan terapkan ke tabel yang Anda perlukan efek ini.

Kode seperti di bawah ini;

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

Coba .table-hoverkelas Bootstrap untuk mengimplementasikan baris yang dapat di-hover , misalnya

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