tabla cambiante de color con mouse encima.

cbo77 · #1 (**permalink**) 06/03/2008, 22:24

saludos!!!

alguien me podria indicar como hago para que al poner el mouse encima de una tabla cualquiera me cambie de color .

por ej tengo en forma estatica una tabla de fondo rojo y cuando paso el mouse por encima me cambie a negro ...

les agradeceria la ayudaaa!!!

Andres Berrio.

juaniquillo · #2 (**permalink**) 07/03/2008, 00:11

lo podrías hacer usando el hover si no fuera porque IE no acepta el hover en otro elemento que no sea un enlace (<a>). La otra forma de hacerlo es usando javascript.

Mikmoro · #3 (**permalink**) 10/03/2008, 11:43

Aquí tienes un truquillo, aunque no sé si te valdrá para lo que quieres.

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tablilla</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
td { background-color: rgb(255, 0, 0);
margin: 0px;
padding: 0px;
}
a { width: 100%;
height: 100%;
display: block;
}
a:hover { background-color: rgb(0, 0, 0);
cursor: text;
}
</style>
</head>
<body>
<table style="width: 50%;" border="0">
<tbody>
<tr>
<td><a href="#"> </a></td>
<td><a href="#"> </a></td>
<td><a href="#"> </a></td>
</tr>
<tr>
<td><a href="#"> </a></td>
<td><a href="#"> </a></td>
<td><a href="#"> </a></td>
</tr>
<tr>
<td><a href="#"> </a></td>
<td><a href="#"> </a></td>
<td><a href="#"> </a></td>
</tr>
</tbody>
</table>
<br />
</body>
</html>

Mikel.

juaniquillo · #4 (**permalink**) 10/03/2008, 12:45

con eso puedes aplicar un hover a las celdas pero no a las lineas completas.

Mikmoro · #5 (**permalink**) 10/03/2008, 12:56

Ah, el fondo de la tabla. Creía que se refería a las celdas. No he leido bien.
Mikel.

Mikmoro · #6 (**permalink**) 10/03/2008, 13:09

Pues nada, se le da la vuelta al truqui y listo

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Plantilla</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
a { background-color: rgb(255, 0, 0);
display: block;
width: 50%;
}
a:hover { background-color: rgb(0, 0, 0);
cursor: text;
}
</style>
</head>
<body>
<a href="#">
<table style="width: 100%;" border="1">
<tbody>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
<tr>
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
</tr>
</tbody>
</table>
</a><br />
</body>
</html>

Mikel.

juaniquillo · #7 (**permalink**) 10/03/2008, 14:15

Si, pero así el documento no valida.

Mikmoro · #8 (**permalink**) 10/03/2008, 16:09

Ya, es que lo queréis todo; sois insaciables.
Pues así sí valida

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Plantilla</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
a { background-color: rgb(255, 0, 0);
display: block;
width: 50%;
}
a:hover { background-color: rgb(0, 0, 0);
cursor: text;
}
table {
background-color: rgb(255, 0, 0) !important;
background-color: transparent;
width: 50% !important;
width: 100%;
}
table:hover { background-color: rgb(0, 0, 0) !important;
}
</style>
</head>
<body>

<table style="width: 100%;" border="1">
<tbody>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
<tr>
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
</tr>
</tbody>
</table>

</body>
</html>

Mikel.

juaniquillo · #9 (**permalink**) 10/03/2008, 20:05

jajaja.. claro. pero bueno, sigue siendo el mismo código, lo que posa es que el validador no usa explorer 6. Pero como quiera, muy buen trabajado.

cbo77 · #10 (**permalink**) 10/03/2008, 22:41

gracias por la ayuda.

cbo77 · #11 (**permalink**) 10/03/2008, 22:43

Cita:

Iniciado por Mikmoro

Ya, es que lo queréis todo; sois insaciables.
Pues así sí valida

Mikel.

mikel:

queria saber como hacer para q esta funcion me trabaje bien en firefox y en ie.

Mikmoro · #12 (**permalink**) 10/03/2008, 23:32

Hola, cbo77.
Ese código debe funcionar bien en IE6, IE7 y Firefox.
En realidad esto lo he hecho como puro divertimento. Si quieres usar de verdad algo así quizá deberías mirar en javascript, que hay una función por ahí para que explorer interprete la pseudoclases como :hover en cualquier etiqueta.

Pero vamos, aunque era una chorradilla, si quieres usar este código tampoco tiene nada de malo; quizá no es lo más "estético" en código, y podría darte otros problemas según con qué y cómo lo uses, pero básicamente funciona, y todo dependerá de lo que quieras hacer.

Mikel.