Problema :hover css

Programação
#1

To tentando adicionar um **hover * na minha tr da minha table, mas tem algo que está dando problema para funcionar. ex:

OBS: Se eu tirar table tbody td eu consigo utilizar o :hover, mas se eu deixar não da certo, não sei o que acontece para funcionar.

    table tbody td {
        background: white;
        padding: 1rem 2rem;
    }

Meu html

 <table id="data-table">
                <thead>
                    <tr>
                        <th>Descrição</th>
                        <th>Valor</th>
                        <th>Data</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Luz</td>
                        <td>-500</td>
                        <td>23/10/2010</td>
                    </tr>
                    <tr>
                        <td>Água</td>
                        <td>1500</td>
                        <td>23/12/2010</td>
                    </tr>
                    <tr>
                        <td>Telefone</td>
                        <td>1500</td>
                        <td>23/12/2010</td>
                    </tr>
                </tbody>
            </table>

Meu CSS

table tbody td {
        background: white;
        padding: 1rem 2rem;
    }
    
    table tbody tr:hover {
        background: red;
    }
1 curtida
#2

Boas, altere para.

table tbody td {
        background: white;
        padding: 1rem 2rem;
    }
    
    table tbody tr:hover td {
        background: red;
    }

Bom estudo

1 curtida
#3

Obrigado! ajudou demais.

1 curtida