Foros del Web » Creando para Internet » CSS »

tabla cambiante de color con mouse encima.

Estas en el tema de tabla cambiante de color con mouse encima. en el foro de CSS en Foros del Web. saludos!!! alguien me podria indicar como hago para que al poner el mouse encima de una tabla cualquiera me cambie de color . por ej ...
  #1 (permalink)  
Antiguo 06/03/2008, 22:24
Avatar de cbo77  
Fecha de Ingreso: diciembre-2007
Ubicación: en medellin colombia
Mensajes: 58
Antigüedad: 10 años
Puntos: 0
tabla cambiante de color con mouse encima.

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.
__________________
momentos de ocio son necesarios, para la creatividad...
  #2 (permalink)  
Antiguo 07/03/2008, 00:11
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: tabla cambiante de color con mouse encima.

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.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #3 (permalink)  
Antiguo 10/03/2008, 12:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla cambiante de color con mouse encima.

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="#">&nbsp;</a></td>
<td><a href="#">&nbsp;</a></td>
<td><a href="#">&nbsp;</a></td>
</tr>
<tr>
<td><a href="#">&nbsp;</a></td>
<td><a href="#">&nbsp;</a></td>
<td><a href="#">&nbsp;</a></td>
</tr>
<tr>
<td><a href="#">&nbsp;</a></td>
<td><a href="#">&nbsp;</a></td>
<td><a href="#">&nbsp;</a></td>
</tr>
</tbody>
</table>
<br />
</body>
</html>
Mikel.
  #4 (permalink)  
Antiguo 10/03/2008, 13:45
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: tabla cambiante de color con mouse encima.

con eso puedes aplicar un hover a las celdas pero no a las lineas completas.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #5 (permalink)  
Antiguo 10/03/2008, 13:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla cambiante de color con mouse encima.

Ah, el fondo de la tabla. Creía que se refería a las celdas. No he leido bien.
Mikel.
  #6 (permalink)  
Antiguo 10/03/2008, 14:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla cambiante de color con mouse encima.

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.
  #7 (permalink)  
Antiguo 10/03/2008, 15:15
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: tabla cambiante de color con mouse encima.

Si, pero así el documento no valida.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #8 (permalink)  
Antiguo 10/03/2008, 17:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla cambiante de color con mouse encima.

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>
<!--[if lte IE 6]><a href="#"><![endif]-->
<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>
<!--[if lte IE 6]></a><![endif]-->
</body>
</html>
Mikel.
  #9 (permalink)  
Antiguo 10/03/2008, 21:05
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: tabla cambiante de color con mouse encima.

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.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #10 (permalink)  
Antiguo 10/03/2008, 23:41
Avatar de cbo77  
Fecha de Ingreso: diciembre-2007
Ubicación: en medellin colombia
Mensajes: 58
Antigüedad: 10 años
Puntos: 0
Re: tabla cambiante de color con mouse encima.

gracias por la ayuda.
__________________
momentos de ocio son necesarios, para la creatividad...
  #11 (permalink)  
Antiguo 10/03/2008, 23:43
Avatar de cbo77  
Fecha de Ingreso: diciembre-2007
Ubicación: en medellin colombia
Mensajes: 58
Antigüedad: 10 años
Puntos: 0
Re: tabla cambiante de color con mouse encima.

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
__________________
momentos de ocio son necesarios, para la creatividad...
  #12 (permalink)  
Antiguo 11/03/2008, 00:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla cambiante de color con mouse encima.

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 18:32.