Bootstrapでホバーオーバーテーブルのホバーオーバーの色を変更するにはどうすればよいですか？

'table-hover'クラスのテーブルがあります。デフォルトのホバーオーバーカラーは、ホワイト/ライトグレーです。この色を変更するにはどうすればよいですか？

私の支配的なスタイルシートに以下を追加してデフォルトを上書きしてみました

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

残念ながら、上記は機能しません

これを試してみてください：

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

これは私のために働きました：

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

これは最も簡単な方法であり、私にとってはうまくいきました。

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

見出しの色を行と同じホバー色に変更する理由がわからない場合は、上記の解決策を使用できます。あなただけの場合t

これは、gruntまたは他のタスクランナーを介してコンパイルされたブートストラップv4用です

$table-hover-bgホバーにハイライトを設定するには変更する必要があります

$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コード：

<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コード

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

CSSコードはそれを示しています：

行の上にマウスを置きます：

.table-hover> thead> tr：hover

thの背景色は＃D1D119に変わります

番目

tbodyにも同じアクションが発生します

.table-hover tbody tr：hover td

試してください：

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

私にとって@ pvskisteak5の答えは「フリッカー効果」を引き起こしました。これを修正するには、以下を追加します。

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

これは、これまでのところ最高のソリューションです。このようなシーンで完璧に機能します

デフォルトのテーブルホバークラスを変更する代わりに、新しいクラス（anotherhover）を作成し、このエフェクトを必要とするテーブルに適用します。

以下のようにコーディングしてください。

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

たとえば、Bootstrapの.table-hoverクラスでホバー可能な行を実装してみてください。

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