ฉันจะเปลี่ยนการวางเมาส์เหนือสีสำหรับการวางเมาส์เหนือตารางใน 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;
}

นี่เป็นวิธีที่ง่ายที่สุดในการทำ imo และได้ผลสำหรับฉัน

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

ไม่แน่ใจว่าทำไมคุณถึงต้องการเปลี่ยนสีหัวเรื่องเป็นสีโฮเวอร์เดียวกันกับแถว แต่ถ้าคุณทำเช่นนั้นคุณสามารถใช้วิธีแก้ไขปัญหาข้างต้น ถ้าคุณต้องการแค่ t

สิ่งนี้มีไว้สำหรับ bootstrap 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

ธ

การกระทำเดียวกันจะเกิดขึ้นกับร่างกาย

.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 tbody tr:hover td { background: CornflowerBlue; }

ลองใช้.table-hoverคลาสของ Bootstrap เพื่อใช้งานแถวที่เลื่อนได้เช่น

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