116

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

ドミナントスタイルシートに以下を追加して、デフォルトを上書きしてみました

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

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

4

13 に答える 13

259

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

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #color;
}
于 2013-03-26T17:05:02.397 に答える
21

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

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

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

于 2014-06-30T15:37:47.170 に答える
18

これは私のために働いた：

.table tbody tr:hover td, .table tbody tr:hover th {
    background-color: #eeeeea;
}
于 2013-10-03T19:01:11.603 に答える
6

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に変わります

th

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

.table-hover tbody tr：hover td

于 2015-08-06T11:24:06.143 に答える
6

これは、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;
于 2016-11-15T16:04:06.687 に答える
2 
.table-hover tbody tr:hover td {
    background: #ffffff;
}
于 2020-10-11T13:39:05.480 に答える
1

試す：

.table-hover > tbody > tr.active:hover > th {
                background-color: #color;
            }
于 2015-03-13T13:49:38.787 に答える
1

私にとって、@pvskisteak5の回答は「ちらつき効果」を引き起こしました。これを修正するには、以下を追加します。

            .table-hover tbody tr:hover,
            .table-hover tbody tr:hover td,
            .table-hover tbody tr:hover th{
                background:#22313F !important;
                color:#fff !important;
            }
于 2015-06-03T10:01:19.443 に答える
1 
.table-hover tbody tr:hover td {
    background: aqua;
}

これは私がこれまでに考えられる最良の解決策です。それはそのようなシーンで完璧に機能します

于 2019-08-29T06:49:34.463 に答える
1

ブートストラップで使用される「CSSカスタムプロパティ」を上書きする必要があることがわかりましたbs-table-accent-bg...

.table-hover > tbody > tr:hover { --bs-table-accent-bg: #f8f8f8; }

パスは、ブートストラップ自体が使用するものです。私はそれをページの検査から取った。

他のソリューションと同じように実行した場合、ブートストラップがすでに適用されているものよりもハイライトを明るくすることができなかったためです。このように機能します（つまり、ホバーカラーを明るくすることができます）。

于 2021-08-01T20:35:01.027 に答える
0

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

以下のようにコーディングします。

.anotherhover tbody tr:hover td { background: CornflowerBlue; }
于 2018-04-23T09:52:43.807 に答える
0

これはいくつかの方法で行うことができます。

  1. 原則的で短い方法：必要なsass変数をオーバーライドするためにsassを使用します。
// Your variable overrides
$table-hover-bg: #d00; // what's that you need
$table-striped-bg: #fff;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";
  1. CSS変数を使用します。
.table {
    --bs-table-hover-bg: #d00;
}

また

#thetable tr:hover, #thetable tr td:hover {
   background-color: #d00;
}
于 2021-12-30T21:02:10.887 に答える
-1

たとえば、Bootstrapの.table-hoverクラスを試して、ホバー可能な行を実装します。

<table class="table table-hover">
  ...
</table>
于 2020-04-15T04:51:48.760 に答える