Como altero a cor ao passar o mouse sobre uma mesa no Bootstrap?

Eu tenho uma mesa com a classe 'table-hover'. A cor padrão ao passar o mouse é branco / cinza claro. Como eu mudo essa cor?

Eu tentei sobrescrever o padrão adicionando o seguinte à minha folha de estilo dominante

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

Infelizmente, o acima não funciona

Experimente:

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

Isso funcionou para mim:

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

Esta foi a maneira mais simples de fazer isso e funcionou para mim.

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

Não tenho certeza por que você deseja alterar a cor do cabeçalho para a mesma cor flutuante das linhas, mas se fizer isso, você pode usar as soluções acima. Se você só quer

Isto é para bootstrap v4 compilado via grunt ou algum outro executor de tarefas

Você precisaria mudar $table-hover-bgpara definir o destaque ao pairar

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

O código css indica que:

passe o mouse sobre a linha:

.table-hover> thead> tr: hover

a cor de fundo desta mudará para # D1D119

º

A mesma ação acontecerá para todos

.table-hover tbody tr: hover td

experimentar:

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

Para mim, a resposta @ pvskisteak5 causou um "efeito de oscilação". Para corrigir isso, adicione o seguinte:

            .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 é a melhor solução que posso encontrar até agora. funciona perfeitamente em tal cenário

Em vez de mudar a classe table-hover padrão, faça uma nova classe (anotherhover) e aplique-a à tabela para a qual você precisa desse efeito.

Codifique conforme abaixo;

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

Experimente a .table-hoverclasse do Bootstrap para implementar linhas flutuantes , por exemplo

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