dominios y alojamiento web en hostalia

¿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...

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:

Pregunta
¿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


Respuesta de Aitor de la Puente Salán
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
Compartir en redes sociales

Comentarios
Enviar un comentario a la faq
Fueron enviados 11 comentarios a la faq
7 comentarios no revisados
4 comentarios revisados:
Por: angelito
24/7/2003
0 votos
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
Pincha si este comentario es spam
Por: shen
18/3/2005
0 votos
muy buena respuesta ya qe uso el Mozilla y no podia cambiar el color completo de la Celda
Pincha si este comentario es spam
Por: Mago
03/2/2006
0 votos
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"'>

Pincha si este comentario es spam
Por: Miguel Angel Alvarez
06/2/2006
1 voto
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

Pincha si este comentario es spam
Ver otros 7 comentarios pendientes de revisar
Enviar un comentario a la faq

FAQ relacionadas

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

Volver al árbol de categoríasVolver al árbol de categorías

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...