cambiar fondo de links al pasar el raton por encima
 

Muy buenas que tal, tengo una pequeña duda que me está costando un menu les expongo el código:

cómo pueden ver es una tabla con links en cada celda.
Cómo puedo hacer para que al pasar el ratón por cada celda se ponga de fondo un cuadrado o una imagen pero respetando el link, pero que ocupe el alto y ancho de la celda, y que el hover sea en cuanto el ratón entra en la celda no hasta que no llega al link

Podeis ver un ejemplo de lo que me refiero en esta web
http://www.acuam.com la barra de navegación en verde. Saludos.

Re: cambiar fondo de links al pasar el raton por encima
 

Pero en la página de ejemplo que citas no lo están haciendo como tu, con tablas.

En tu caso, prueba a ñadir esto a tu css:

a { display: block;
}
a:hover { background-color: rgb(51, 153, 153);
}

Mikel.

Re: cambiar fondo de links al pasar el raton por encima
 

Gracias por la contestacion mikmoro, eso ya lo tengo la cuestión es que no se a donde hay que hacerle el,

a { display: block;
}
a:hover { background-color: rgb(51, 153, 153);
}

si se lo hago al link solo me hace el hover cuando llega al linkentonces yo lo que quiero esque me lo haga cuando el ratón llega al td a la celda. Creo que no he dicho que esta tabla esta dentro de otro div tal que así:
Tenia dos o tres clases y ya estaba hecho un lio, a partir de ahí cómo puedo hacer para que cuando entre el ratón en la celda al hacer hover ponga el color de fondo en los links que sea...
No se si se puede hacer hover a las celdas... Espero respuesta muchas gracias un saludo de nuevo.

Re: cambiar fondo de links al pasar el raton por encima
 

.home td a{
display: block;}
.home td a:hover {
background-color: #color;}

De todas formas, en IE7 y en Firefox puedes hacer el td:hover sin necesidad de poner el a de enlace, aunque piensa que navegadores más antiguos sólo aceptan el a:hover e ignoran el :hover sobre cualquier otro elemento.

Re: cambiar fondo de links al pasar el raton por encima
 

Bueno, no sé qué significa "eso ya lo tengo", y menos entiendo que si ya lo tienes no sepas donde ponerlo. Es raro que tuvieras un display: block; en tus enlaces, como te pongo.

En el head de tu página, pon esto

<style type="text/css">
a { display: block;
}
a:hover { background-color: rgb(51, 153, 153);
}
</style>

Pruébalo así mismo, y a ver qué pasa.

Re: cambiar fondo de links al pasar el raton por encima
 

Viendo su código... ¿de dónde sale esa clase .home? NO la veo por ninguna parte.

Mikel.

Re: cambiar fondo de links al pasar el raton por encima
 

Digo yo, está en el primer mensaje. :-) Ahora me he dado cuenta que ha cambiado el código. Probemos esto:

Y el css:

Re: cambiar fondo de links al pasar el raton por encima
 

Ah, :risa: pues no había vuelto a mirar el primer mensaje.

¿Pero has visto lo que ocurre cuando le pones un display block al td?

Si pruebas el código que le puse verás que es perfectamente válido para lo que pedía.

Mikel.

Re: cambiar fondo de links al pasar el raton por encima
 

Hola Mikel,
He probado a poner tu codigo, y funciona correcto en ie7 (donde lo he mirado), excepto con que el background solo lo cambia en el ancho del texto.
Tambien he probado el display block en el td, y no veo nada anormal. ¿Qué es lo que ves?
Yo creo que lo mejor es el td:hover para que cambie el fondo al pasar el raton por encima, sin tener que usar JS con eventos onmouseover y out, etc... (esto para ie7, firefox, y demás navegadores que acepten el :hover fuera de link)
En navegadores más antiguos, tanto tu código como el mío tienen la misma función, con excepción del display block que mencionas, que no consigo ver).

Re: cambiar fondo de links al pasar el raton por encima
 

Mejor una imagen que mil palabras.

Tu código tal cual, con un color de fondo en el hover para que se vea que cambia. Míralo en Firefox.

Mi código tal cual, con un borde en la tabla para que se vea que cubre el alto y el ancho de la celda.

Mikel.

Re: cambiar fondo de links al pasar el raton por encima
 

Interesante reacción en Firefox :neurotico

Si no me equivoco, ésto no ocurre con <li> en listas, ¿verdad? Sería otra opción. Tu efecto es el esperado, pero como te digo, en navegadores como ie6 o ie5 ya no rula...

De todas formas, te agradezco tu aviso. A partir de ahora, mirare el resultado antes de comentar :abajo:

Re: cambiar fondo de links al pasar el raton por encima
 

Sí, si ocurre lo mismo, porque al tener display block cada "li" ocupará una línea, a no ser que estén flotados (float: left). Bueno, no ocurrirá lo mismo (no se apretarán), pero cada uno estará en una línea.
¿Por qué no ocurre en el caso de "a" (enlace)? porque el enlace está dentro de una celda (td), que no tiene display block, y el enlace no puede salir de ella aunque tenga display block.

Pero mi ejemplo yo lo veo bien en IE6; funciona igual que en FF, porque quien tiene el hover es el enlace.

Mikel.

Re: cambiar fondo de links al pasar el raton por encima
 

Tienes razón, y en ie5 también se vé correcto. Craso error mío. Mil perdones.

Re: cambiar fondo de links al pasar el raton por encima
 

Perdón por nada, por mi parte. Es muy sano elucubrar. Si ha quedado aclarado perfecto. Ahora falta que quien hizo la consulta diga a qué caso exacto lo quiere aplicar y con qué peculiaridades, para ver cómo adaptarlo.

Mikel.