cambiar color de fondo en tablas por css??

CrepitantE · #1 (**permalink**) 13/01/2008, 16:22

Saludos a todos.

Mi pregunta es:

Si se le puede cambiar el color de fondo a las tablas en css al pasar el mouse por ellas.

Agradeceria mucho su ayuda.

aloqui · #2 (**permalink**) 13/01/2008, 16:35

Si, por ejemplo para cambiar el color de la fila se puede hacer:

Código:

<html>
<head>
<style type="text/css">
.filaItem1 { background-color: white;  }
.filaItem0 { background-color: yellow; }
.filaOver  { background-color: pink;   }
</style>
</head>
<body>
<table>
  <tr class="filaItem0" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem0';">
    <td>hola</td>
  </tr>  
  <tr class="filaItem1" onmouseover="this.className='filaOver'" onmouseout="this.className='filaItem1';">
    <td>que tal</td>
  </tr>
</table>  
</html>

JavierB · #3 (**permalink**) 14/01/2008, 01:45

Hola CrepitantE

Para la mayoría de los navegadores, que no sean IE 6 o anteriores, puedes usar:

Código:

td:hover {background:red}

Saludos,

safranero · #4 (**permalink**) 14/01/2008, 08:40

JavierB ie7 tp soporta el hover en el td, creo que en el 8 si xD

JavierB · #5 (**permalink**) 14/01/2008, 09:32

Hola safranero

IE 7 sí admite td:hover acabo de probarlo.

Saludos,

safranero · #6 (**permalink**) 14/01/2008, 09:35

Que versión has probado ? porque a mi no me funciona.

safranero · #7 (**permalink**) 14/01/2008, 09:47

A mi con este código no me funciona y la versión de ie7 es: 7.0.5730.11IC

Código:

        * { margin:0; padding:0 }
        
        body { background: #fff; text-align:center; }
        
        table {
            position:absolute;
            left:30%;
            top:30%;
            border:1px solid #000;
            width:500px;
        }
        
        td {
            padding: 5px;
            border:1px solid #000;
        }
        
        td:hover {
            background:red
        }
        
        tr td:hover {
            background:blue;
        }
        
        tr:hover td {
            background: yellow;
        }

El html es:

Código:

    <table>
        <tr>
            <th>Cabecera 1</th>
            <th>Cabecera 2</th>
            <th>Cabecera 3</th>
        </tr>
        
        <tr>
            <td>Columna 1</td>
            <td>Columna 2 </td>
            <td>Columna 3</td>
        </tr>
        
        <tr>
            <td>Columna 1</td>
            <td>Columna 2 </td>
            <td>Columna 3</td>
        </tr>        
        <tr>
            <td>Columna 1</td>
            <td>Columna 2 </td>
            <td>Columna 3</td>
        </tr>
    </table>

Un saludo.

JavierB · #8 (**permalink**) 14/01/2008, 09:58

Hola de nuevo.

La mía es la 7.0.5730.11 ¿Has puesto un DOCTYPE?

Saludos,

safranero · #9 (**permalink**) 14/01/2008, 10:02

No, no lo puse.

safranero · #10 (**permalink**) 14/01/2008, 10:07

Vale, pues si que era eso, la verdad es que nunca creí que el doctype era tan importante.

Lo he puesto y ya me ha funcionado el hover. Lo malo es que lo he puesto y las capas se me han desposicionado y un texto que tenia oculto dentro de un span ahora es visible...

safranero · #11 (**permalink**) 14/01/2008, 10:23

Ya estoy resolviendo varias cosas jejejeje, solo me queda el span que esta visible!! Me gusta esto del estricto, me ha solucionado unas cuantas cosas.

aloqui · #12 (**permalink**) 14/01/2008, 10:40

Por cierto safranero, por si no lo sabes: en lugar de poner varios mensajes seguidos en el foro, también hay una opción para editar mensajes.

safranero · #13 (**permalink**) 14/01/2008, 10:44

Si, lo sé, perdón.

CrepitantE · #14 (**permalink**) 14/01/2008, 12:25

Agradezco profundamente a todos por su ayuda, realmente me instruyó bastante. Las discusiones fueron bastante productivas.

PD: una pregunta onmouseout-onmouseover es javascript o hace parte de funcinoes de html???

JavierB · #15 (**permalink**) 14/01/2008, 15:36

Hola CrepitantE

onmouseover y onmouseout son eventos de JavaScript.

Saludos,