Bootstrap'te fareyle üzerine gelme tablosunun üzerine gelme rengini nasıl değiştirebilirim?

'Table-hover' sınıfına sahip bir masam var. Varsayılan vurgulu renk beyaz / açık gridir. Bu rengi nasıl değiştiririm?

Baskın stil sayfama aşağıdakileri ekleyerek varsayılanın üzerine yazmayı denedim

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

Maalesef yukarıdakiler çalışmıyor

Bunu bir deneyin:

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

Bu benim için çalıştı:

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

Bu, imo yapmanın en basit yoluydu ve benim için işe yaradı.

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

Başlık rengini neden satırlarla aynı vurgulu renge değiştirmek istediğinizden emin değilim, ancak bunu yaparsanız, yukarıdaki çözümleri kullanabilirsiniz. Eğer sadece istiyorsan

Bu, grunt veya başka bir görev çalıştırıcısı aracılığıyla derlenen bootstrap v4 içindir.

$table-hover-bgFareyle üzerine gelindiğinde vurguyu ayarlamak için değiştirmeniz gerekir

$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 KODU :

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

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

Css kodu şunu gösterir:

fareyi satırın üzerine getirin:

.table-hover> thead> tr: hover

arka plan rengi # D1D119 olarak değişecek

inci

Herkes için aynı eylem olacak

.table-hover tbody tr: hover td

Deneyin:

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

Benim için @ pvskisteak5 yanıtı bir "titreme etkisine" neden oldu. Bunu düzeltmek için aşağıdakileri ekleyin:

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

Bu şimdiye kadar bulabileceğim en iyi çözüm. böyle bir ortamda mükemmel çalışıyor

Varsayılan table-hover sınıfını değiştirmek yerine, yeni bir sınıf (anotherhover) oluşturun ve bu efekte ihtiyaç duyduğunuz tabloya uygulayın.

Aşağıdaki gibi kod;

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

Örneğin, gezinebilir satırlar.table-hover uygulamak için Bootstrap sınıfını deneyin

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