¿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

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

Comentarios

angelito

24/7/2003
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

shen

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

Mago

03/2/2006
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"'>

Miguel Angel Alvarez

06/2/2006
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

jorge

03/8/2006
Pero si quieres que unas celdassean de un color y otras de otras???

Argyle

29/3/2007
Hola amigos, necesito que me den una mano quisiera hacer un menu rollover en un tabla, pero quiero que cambie de color de la celda anterior y no la que estoy señalando, similar al menu que tiene esta web:

http://www.mota.ru

No se si es DHTML, CSS, o JAVASCRIPT, por favor les agradecería si me tiran una idea.

LAhn

29/11/2008
Esta hecho con los enlaces y no con la celda

jose

10/4/2009
mucho más sencillo
yo tengo una solución más sencilla.

en el css, basta con indicar:

td:hover{
background: #FF9990
}

y listo, cuando se posicione el mouse sobre la celda tomará el fondo indicado.

peace of cake!

javier narizon

09/9/2009
un pinche recklamo
no mamen no sean babosos...

pinches idiotas

viri

22/2/2011
ayudaaa x favor
estoy haciendo una web y para mi menu tengo unos botones que luego al pulsar en cada uno de ellos se hace mas grande y cambia de color.
mi problema es q cuando le aplico un fade me aparecen los dos botones, estado normal y pulsado y nose como hacer para q solo aparezca uno en cada momento
mi codigo es el siguiente
html:

<nav> <!-- contiene los enlaces para la navegacion de la pagina -->
<ul class="lista_horizontal" >
<li class="lista_horizontal">
<a href="home.php"><img class="fade" id="inicio" src="img/bt_inicio.png" style="background-image:url(img/bt_inicio_pulsado.png); opacity:0;" border="0" alt="inicio"/></a>
</li>
<li class="lista_horizontal">
<a href="home2.php"><img class="fade" id="miembros" src="img/bt_miembros.png" style="background-image:url(img/bt_miembros_puls.png);" border="0" alt="miembros"/></a>
</li>
<li class="lista_horizontal">
<a href="home.php"><img class="fade" id="publicaciones" src="img/bt_public.png" style="background-image:url(img/bt_public_puls.png);" border="0" alt="publicaciones"/></a>
</li>
<li class="lista_horizontal">
<a href="proyectos.php"><img class="fade" id="proyectos" src="img/bt_proyectos.png" style="background-image:url(img/bt_proy_puls.png);" border="0" alt="proyectos"/></a>
</li>
<li class="lista_horizontal">
<a href="docencia.php"><img class="fade" id="docencia" src="img/bt_docencia.png" style="background-image:url(img/bt_doc_puls.png);" border="0" alt="docencia"/></a>
</li>
<li class="lista_horizontal">
<a href="colaboraciones.php"><img class="fade"id="colaboraciones" src="img/bt_colabor.png" style="background-image:url(img/bt_colab_puls.png);" border="0" alt="colaboraciones"/></a>
</li>
</ul> <!-- fin ul -->

</nav> <!-- fin del nav -->



codigo javascript.:


$(document).ready(function(){

$("img.fade").click(function() {

$("#inicio").attr( { src: "img/bt_inicio.png", border: 0 } );

$("#miembros").attr( { src: "img/bt_miembros.png", border: 0 } );

$("#publicaciones").attr( { src: "img/bt_public", border: 0 } );

$("#proyectos").attr( { src: "img/bt_proyectos.png", border: 0 } );

$("#docencia").attr( { src: "img/bt_docencia.png", border: 0 } );

$("#colaboraciones").attr( { src: "img/bt_colabor.png", border: 0 } );

switch( $(this).attr('id') ){

case 'inicio':

$("#inicio").attr( { src: "img/bt_inicio_pulsado.png", border: 0 } );

break;

case 'miembros':

$("#miembros").attr( { src: "img/bt_miembros_puls.png", border: 0} );

break;

case 'proyectos':

$("#proyectos").attr( { src: "img/bt_proy_puls.png", border: 0 } );

break;

case 'publicaciones':

$("#publicaciones").attr( { src: "img/bt_public_puls.png", border: 0 } );

break;

case 'docencia':

$("#docencia").attr( { src: "img/bt_doc_puls.png", border: 0 } );

break;

case 'colaboraciones':

$("#colaboraciones").attr( { src: "img/bt_colabor_puls.png", border: 0 } );

break;

} // fin case

}); // fin function


la transicion de un boton a otro son dos imagenes como podeis apreciar pero nose q es lo q hago mal o si se hace asi,

gracias x la posibles respuestas y gracias de antemano

anaoy

18/6/2011
solo pones este codigo el el tr de la tabla y con eso.
<tr onMouseOver="this.style.backgroundColor='#FFFFC6';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='#FFFFFF'"];">

Roy Argaez

04/2/2015
Duda!
Buenas tardes.
Tengo una duda acerca de una función, yo utilizo el framework de php "Yii" e intento que al pasar por una función un campo del grid cambie el color hasta que el elemento en cuestión pase por la otra función para desmarcar el color.
Espero me pueda ayudar.
En espera de su respuesta un cordial saludo desde México.
FAQ relacionadas
Volver al árbol de categoríasVolver al árbol de categorías