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

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>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</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

This worked for me:

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

This was the most simple way to do it imo and it worked for me.

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

Not sure why you would want to change the heading color to the same hover color as the rows but if you do then you can use the above solutions. If you just want t

Give this a try:

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