How do I change the hover over color for a hover over table in Bootstrap?

Question

I have a table with class \'table-hover\'. The default hover over color is a white / light grey. How do I change this color?

I\'ve tried overwriting the default by ad

Answer 1

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

this is the best solution i can gice so far.it works out perfectly in such scena

Answer 2

HTML CODE:

<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 CODE

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

The css code indicate that:

mouse over row:

.table-hover > thead > tr:hover

background color of th will change to #D1D119

th

Same action will happen for tbody

.table-hover tbody tr:hover td

Answer 3

For me @pvskisteak5 answer has caused a "flicker-effect". To fix this, add the following:

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

Answer 4

This is for bootstrap v4 compiled via grunt or some other task runner

You would need to change $table-hover-bg to set the highlight on hover

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

Answer 5

This worked for me:

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