Làm cách nào để thay đổi di chuột qua màu để di chuột qua bảng trong Bootstrap?

Question

Tôi có một bảng với lớp 'di chuột'. Màu di chuột mặc định là màu trắng/xám nhạt. Làm cách nào để thay đổi màu này?

Tôi đã thử ghi đè mặc định bằng cách thêm dòng sau vào style sheet chi phối tôi

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

Thật không may, trên không hoạt động

Answer 1

này cung cấp cho một thử:

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

Answer 2

Điều này phù hợp với tôi:

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

Answer 3

Đây là cách đơn giản nhất để làm điều đó và nó đã làm việc cho tôi.

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

Không chắc chắn lý do bạn muốn thay đổi màu tiêu đề thành cùng màu di chuột như các hàng nhưng nếu bạn thực hiện thì bạn có thể sử dụng các giải pháp trên. Nếu bạn chỉ muốn t

Answer 4

thử:

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

Answer 5

Đối với tôi câu trả lời @ pvskisteak5 đã gây ra một "nhấp nháy-hiệu quả". Để sửa lỗi này, thêm dòng sau:

  .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 MÃ:

<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 MÃ

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

Mã css chỉ ra rằng:

chuột lên liên tiếp:

.table-hover> thead> tr: hover màu

nền của thứ sẽ thay đổi để # D1D119

thứ

Hành động tương tự sẽ xảy ra đối với tbody

.bàn di chuột tbody tr: hover td

Answer 7

này được cho bootstrap V4 biên soạn qua grunt hoặc một số người chạy nhiệm vụ khác

Bạn sẽ cần phải thay đổi $table-bg-hover để thiết lập các điểm nhấn trên di chuột

$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;