hover para todas las filas

javiinet · #1 (**permalink**) 16/05/2013, 13:06

Hola. No consigo entender porque solo consigo aplicar hover para la primera fila.
Ayuda, porfa.

Código:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
        .cabecera {background-color:#C3C3CF}
        .lateral {background-color:#FF80B2}
        .par {background-color:#FFA6C9}
        .impar {background-color:#FFEDF4}
        table tr:hover{background: #99FFCC}
    </style>
</head>
    <body>
        <table border="1">
            <tr class="cabecera">
                <th align="center">Carácter</th>
                <th align="center">Decimal</th>
                <th align="center">Hexadecimal</th>                
            </tr>
            <tr>
                <th class="lateral" align="center">á</th>
                <td class="par" align="center">224</td>
                <td class="par" align="center">E0</td>
            </tr>
            <tr>
                <th class="lateral" align="center">é</th>
                <td class="impar" align="center">233</td>
                <td class="impar" align="center">E9</td>
            </tr>
        </table>    
    </body>
</html>

GRACIASSSS

Lobito14 · #2 (**permalink**) 16/05/2013, 16:38

El problema está en que de base, el color se lo estás dando a los campos individualmente, un color individual para los <th> y <td> dentro del <tr>.

Entonces cuando cambias el color solo del <tr>, no se cambian los otro.

Esto lo solucionarías con algo como esto:

Código CSS:

Ver originaltable tr:hover th{background-color:#99FFCC}
table tr:hover td{background-color:#99FFCC}

Poner esas dos lineas en la parte :hover del CSS, para que tenga en cuenta todo y ya está.

Un saludo.