Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

¿Cómo puedo cambiar el color de las celdas cuando paso el puntero por encima de ellas?

¿Alguien sabe como hacer para que al pasar el puntero del ratón por encima de una celda, esta cambie el color de su fondo? (y que al quitarlo vuelva al color original). Supongo que se hace con CSS pero solo me sale que cambie el texto de color al pasar el ratón por encima, y lo que quiero es que cambie de color el fondo. Si no se puede hacer con CSS ¿alguien sabe como se hace con javascript?. Muchas gracias

La FAQ ¿Cómo puedo cambiar el color de las celdas cuando paso el puntero por encima de ellas? tiene Pertenece a la categoría:


 Respuesta de Aitor de la Puente Salán  21/11/02 
Veamos la primera propuesta de solución, por Aitor.

<html>
<head>
<title>Prueba CSS</title>
<style type="text/css">
a.enlace {
color: #0000D9;
width: 100%;
height: 100%;
text-decoration: none;
}
a.enlace:hover {
text-decoration: none;
background: #77AADD;
}
table {
border: 1px solid red;
width: 20%;
}
td {
align: middle;
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<a class="enlace" href="#">enlace 1</a>
</td>
</tr>
<tr>
<td>
<a class="enlace" href="#">enlace 2</a>
</td>
</table>
</body>
En el artículo llamado Realizar un rollover sólo con CSS y utilizando imágenes de DesarrolloWeb.com se muestra como hacer enlaces que ocupen todo el espacio donde están situados

Complementar la respuestaComplementar la respuesta
Volver al árbol de categoríasVolver al árbol de categorías

 Comentarios de los visitantes
Se muestran 4 comentarios revisados

 Comentario de angelito
24/7/03 
Tambien puedes en lugar de poner el color original y por el q se cambia en cada celda, puedes dejarlo fijo en las funciones.

<html>
<head>
    <title>TITULO</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="css/estilos.css">
<script language="JavaScript">
<!--

var ns4 = (document.layers)?true:false
var ie4 = (document.all)?true:false
if(ie4){
    document.write("<link rel='stylesheet' href='css/estilos_ie.css'>")
}else{
    document.write("<link rel='stylesheet' href='css/estilos_ns.css'>")
}
function overTD(td,color){td.bgColor=color;}
function outTD(td,color){td.style.cursor='default';td.bgColor=color;}
function clickTD(td){td.children.tags('A')[0].click();}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" topmargin=0 leftmargin=0 >
<table border="0" bordercolor="#ffff66" cellpadding="0" cellspacing="0" width="100%">
    <tr>

       <td class="enlace" bgcolor='2684BF' onMouseOver="overTD(this,'#33FF00');" onMouseOut="outTD(this,'2684BF');" onClick="clickTD(this);">
          linea
       </td>
    <tr>
       <td height="1">
       </td>
    </tr>

       <td class="enlace" bgcolor='2684BF' onMouseOver="overTD(this,'#FFFF00');" onMouseOut="outTD(this,'2684BF');" onClick="clickTD(this);">
          linea
       </td>
    <tr>
       <td height="1">
       </td>
    </tr>

       <td class="enlace" bgcolor='2684BF' onMouseOver="overTD(this,'#FF0000');" onMouseOut="outTD(this,'2684BF');" onClick="clickTD(this);">
          linea
       </td>
    <tr>
       <td height="1">
       </td>
    </tr>
</td></tr></table>
</body>
</html>


Salu2

 Comentario de shen
18/3/05 
muy buena respuesta ya qe uso el Mozilla y no podia cambiar el color completo de la Celda

 Comentario de Mago
03/2/06 
Si lo que buscas es cambiar el color, solamente es necesario darle un estilo a la celda en un mouse over, pueden hacerlo de la siguiente manera..

<td align="middle" bgcolor="#DDDDDD" onmouseover='this.style.background="#FF0000"' onmouseout='this.style.background="#DDDDDD"'>


 Comentario de Miguel Angel Alvarez
06/2/06 
También se puede ajustar para que los enlaces ocupen todo el espacio de la celda o capa donde están incluidos. Así, cuando un usuario se sitúe encima de una celda o capa donde está el enlace, se cambiará el color por lo que tengamos en la declaración hover de CSS para ese enlace. La clave es el display: block; que hemos indicado como estilo en los enlaces.

El problema es cuando le aplicamos un width al estilo de las capas donde colocamos los enlaces, que se pierde el efecto de que el link ocupe todo el espacio de su contenedor.

Veamos el código.

<html>
<head>
<title>rollover css e imágenes</title>
<style type="text/css">
.navenlace{
margin:3 0 3 0px;
padding: 2px;
border: 1px solid #999999;
font-weight: bold;
}
.navenlace A{
color: #666666;
text-decoration: none;
display: block;
}

.navenlace A:hover{
background-color: #666666;
color: #ffffcc;
}
</style>
</head>
<body>

<div class=navenlace>
<a href="#">Enlace 1</a>
</div>
<div class=navenlace>
<a href="#">Link chulo</a>
</div>
<div class=navenlace>
<a href="#">Otras cosas</a>
</div>

</body>
</html>

Insisto: para que los enlaces ocupen todo el espacio disponible, tiene que asignarse el estilo display:block


 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se han encontrado 3 comentarios sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
 
FAQ relacionadas
  + Estilos en barras de desplazamiento
  + Estilos CSS en los botones de formularios y Netscape 4
  + Manuales de CSS
  + Enlaces que cambian al pasar el ratón
  + ¿Como puedo cambiar el color de la barra de desplazamiento?.
  + Diferencias de colocar estilos CSS en distintos lugares
  + Cambiar color a los enlaces
  + Quitar subrayado a los enlaces
  + Quiero personalizar los links de mi página para que todos sean distintos los unos de los otros
  + Estilo en los campos de formulario
  + Cambiar el tamaño de letra de un menú select
  + Cambiar el estilo de la primera letra de un párrafo
  + Aplicar estilo a la primera línea de un texto
  + Menú dinámico con CSS
  + Textarea sin borde
  + Clip en un div
  + Efecto sombra en mi página
  + Maquetar un boletín con CSS
  + Caja con CSS
  + Estilo en tablas HTML con CSS
  + Aspecto del cursor con CSS
  + Capas en CSS
  + Qué es Shorthand
  + Maquetar una web con CSS
  + problema al aplicar z-index a elementos select de formulario
  + Maquetar por tablas o por capas
  + Algunos programas para editar CSS
  + Maquetar galería de fotos con CSS
  + Rollover con CSS
  + Botones con estilos
  + ¿Qué Significa CSS?
  + Minúsculas con CSS
  + Hojas de estilo en cascada (CSS)
  + Formulario con CSS
  + Efecto de sombra con CSS
  + Cambiar tipografía para toda la página
  + Imprimir con CSS
  + Comentarios en CSS
  + Cómo eliminar los márgenes abajo y arriba que tiene un formulario
  + Definir los márgenes de un encabezamiento o título <h1>
  + ...

Para ver más FAQ relacionadas accede a las categorías:

Complementar la respuestaComplementar la respuesta
Volver al árbol de categoríasVolver al árbol de categorías

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia