如何在Bootstrap中將鼠標懸停在表上懸停在表上？

Question

我有一個類'table-hover'的表。懸停在顏色上的默認值是白色/淺灰色。我該如何改變這種顏色？

我試圖通過添加以下到我的優勢樣式表

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

不幸的是覆蓋默認，上述不起作用

Answer 1

試試這個：

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

Answer 2

這工作對我來說：

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

Answer 3

這是最簡單的方法來做到這一點，它爲我工作。

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

不知道爲什麼要將標題顏色更改爲與行相同的懸停顏色，但是如果你這樣做，則可以使用上述解決方案。如果你只是想牛逼

Answer 4

嘗試：

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

Answer 5

對我來說@ pvskisteak5的回答引起了「閃爍效果」。爲了解決這個問題，添加以下內容：

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

Answer 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代碼表明：

鼠標移到行：

。表懸停> THEAD> TR：懸停的第

背景顏色會變成＃D1D119

第

tbody會發生同樣的動作

。表懸停TBODY TR：懸停TD

Answer 7

這是爲了引導V4通過咕嚕或一些其他任務運行編譯

你需要改變$table-bg-hover設定高懸停

$table-cell-padding:   .75rem !default; 
$table-sm-cell-padding:   .3rem !default; 

$table-bg:      transparent !default; 
$table-bg-accent:    rgba(0,0,0,.05) !default; 
$table-bg-hover:    rgba(0,0,0,.075) !default; 
$table-bg-active:    $table-bg-hover !default; 

$table-border-width:   $border-width !default; 
$table-border-color:   $gray-lighter !default;