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

Tôi có một bảng với lớp 'table-hover'. 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 phần sau vào biểu định kiểu chính của mình

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

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

Hãy thử cái này:

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

Điều này đã làm việc cho tôi:

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

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

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

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

Điều này dành cho bootstrap v4 được biên dịch qua grunt hoặc một số trình chạy tác vụ khác

Bạn sẽ cần thay đổi $table-hover-bgđể đặt điểm đánh dấu khi di chuột

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

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

MÃ CSS

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

Mã css chỉ ra rằng:

di chuột qua hàng:

.table-hover> thead> tr: hover

màu nền của th sẽ đổi thành # D1D119

thứ tự

Hành động tương tự sẽ xảy ra cho tbody

.table-hover tbody tr: hover td

thử:

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

Đối với tôi, câu trả lời @ pvskisteak5 đã gây ra "hiệu ứng nhấp nháy". Để khắc phục điều này, hãy thêm những thứ sau:

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

đây là giải pháp tốt nhất mà tôi có thể giới thiệu cho đến nay. nó hoạt động hoàn hảo trong các tình huống như vậy

Thay vì thay đổi lớp di chuột qua bảng mặc định, hãy tạo một lớp mới (khác) và áp dụng nó cho bảng mà bạn cần hiệu ứng này.

Mã như bên dưới;

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

Hãy thử .table-hoverlớp của Bootstrap để triển khai các hàng có thể lưu trữ , chẳng hạn

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