¿Cómo cambio el color del desplazamiento sobre la tabla en Bootstrap?

Tengo una mesa con la clase 'table-hover'. El desplazamiento predeterminado sobre el color es blanco / gris claro. ¿Cómo cambio este color?

Intenté sobrescribir el valor predeterminado agregando lo siguiente a mi hoja de estilo dominante

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

Desafortunadamente, lo anterior no funciona

Prueba esto:

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

Esto funcionó para mí:

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

Esta fue la forma más sencilla de hacerlo y funcionó para mí.

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

No estoy seguro de por qué querría cambiar el color del título al mismo color de desplazamiento que las filas, pero si lo hace, puede usar las soluciones anteriores. Si solo quieres t

Esto es para bootstrap v4 compilado a través de grunt o algún otro corredor de tareas

Debería cambiar $table-hover-bgpara establecer el resaltado al pasar el mouse

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

CÓDIGO 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>[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>

CÓDIGO CSS

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

El código css indica que:

mouse sobre la fila:

.table-hover> thead> tr: hover

el color de fondo de th cambiará a # D1D119

th

La misma acción sucederá para tbody

.table-hover tbody tr: hover td

tratar:

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

Para mí, la respuesta de @ pvskisteak5 ha causado un "efecto de parpadeo". Para solucionar esto, agregue lo siguiente:

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

esta es la mejor solución que puedo encontrar hasta ahora. Funciona perfectamente en tal escenario

En lugar de cambiar la clase de desplazamiento de tabla predeterminada, cree una nueva clase (otro desplazamiento) y aplíquela a la tabla para la que necesita este efecto.

Codifique como se muestra a continuación;

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

Pruebe la .table-hoverclase de Bootstrap para implementar filas flotantes , por ejemplo

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