cambiar fondo de links al pasar el raton por encima

[hyperrjas]

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

Código:

<table class="home" width="674"  align="center" cellpadding="2">
          <tr>
            <td width="95" height="10" ><div id="home" class="homeposition" align="center"><a href="index.php">HOME</a></div></td>
            <td width="95" height="10"><div class="homeposition" align="center"><a href="socios.php">SOCIOS</a></div></td>
            <td width="95" height="10"><div  class="homeposition"align="center"><a href="clientes.php">CLIENTES</a></div></td>
            <td width="95" height="10"><div  class="homeposition"align="center"><a href="nosotros.php">NOSOTROS</a></div></td>
            <td width="95" height="10"><div class="homeposition" align="center"><a href="http://www.eodesk.com/blog">BLOG</a></div></td>
            <td width="95" height="10"><div class="homeposition" align="center"><a href="soporte.php">SOPORTE</a></div></td>
            <td width="95" height="10"><div class="homeposition" align="center"><a href="contactar.php">CONTACTAR</a></div></td>
          </tr>
        </table>

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.

[Mikmoro]

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.

[hyperrjas]

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í:

Código:

<div align="center"> <table width="674"  align="center" cellpadding="2">
          <tr>
            <td width="95" height="10" ><div  align="center"><a href="index.php">HOME</a></div></td>
            <td width="95" height="10"><div align="center"><a href="socios.php">SOCIOS</a></div></td>
            <td width="95" height="10"><div  align="center"><a href="clientes.php">CLIENTES</a></div></td>
            <td width="95" height="10"><div  align="center"><a href="nosotros.php">NOSOTROS</a></div></td>
            <td width="95" height="10"><div  align="center"><a href="http://www.eodesk.com/blog">BLOG</a></div></td>
            <td width="95" height="10"><div align="center"><a href="soporte.php">SOPORTE</a></div></td>
            <td width="95" height="10"><div align="center"><a href="contactar.php">CONTACTAR</a></div></td>
          </tr>
        </table></div>

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.

[Squizophrenia]

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

[Mikmoro]

Iniciado por hyperrjas

Gracias por la contestacion mikmoro, eso ya lo tengo

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.

[Mikmoro]

Iniciado por Squizophrenia

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

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

Mikel.

[Squizophrenia]

Código:

<table class="home">
          <tr>
            <td width="95" height="10" ><div id="home" class="homeposition" align="center

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

Código:

<div align="center">
<table class="home">
          <tr>
            <td width="95" height="10" ><a href="index.php">HOME</a></td>
            <td width="95" height="10"><a href="socios.php">SOCIOS</a></td>
            <td width="95" height="10"><a href="clientes.php">CLIENTES</a></td>
            <td width="95" height="10"><a href="nosotros.php">NOSOTROS</a></td>
            <td width="95" height="10"><a href="http://www.eodesk.com/blog">BLOG</a></td>
            <td width="95" height="10"><a href="soporte.php">SOPORTE</a></td>
            <td width="95" height="10"><a href="contactar.php">CONTACTAR</a></td>
          </tr>
        </table></div>

Y el css:

Código:

.home {
width: 674px;
text-align: center;
padding: 2px;}
.home td {
display: block;}
.home td:hover {
background-color: #color;}
.home td a{
display: block;}
.home td a:hover {
background-color: #color;}

[Mikmoro]

Ah, 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.

[Squizophrenia]

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

[Mikmoro]

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.

[Squizophrenia]

Interesante reacción en Firefox

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

[Mikmoro]

Iniciado por Squizophrenia

Si no me equivoco, ésto no ocurre con <li> en listas, ¿verdad? Sería otra opción.

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.

Iniciado por Squizophrenia

Tu efecto es el esperado, pero como te digo, en navegadores como ie6 o ie5 ya no rula...

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

Mikel.

[Squizophrenia]

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

[Mikmoro]

Iniciado por Squizophrenia

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

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.