Foros del Web » Creando para Internet » CSS »

cambiar fondo de links al pasar el raton por encima

Estas en el tema de cambiar fondo de links al pasar el raton por encima en el foro de CSS en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 10/05/2008, 15:48
 
Fecha de Ingreso: abril-2007
Mensajes: 156
Antigüedad: 10 años, 7 meses
Puntos: 0
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ó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.
  #2 (permalink)  
Antiguo 10/05/2008, 16:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #3 (permalink)  
Antiguo 11/05/2008, 05:24
 
Fecha de Ingreso: abril-2007
Mensajes: 156
Antigüedad: 10 años, 7 meses
Puntos: 0
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í:
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.
  #4 (permalink)  
Antiguo 11/05/2008, 05:26
Avatar de Squizophrenia  
Fecha de Ingreso: mayo-2008
Ubicación: Barcelona (Spain)
Mensajes: 41
Antigüedad: 9 años, 7 meses
Puntos: 2
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.
  #5 (permalink)  
Antiguo 11/05/2008, 05:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: cambiar fondo de links al pasar el raton por encima

Cita:
Iniciado por hyperrjas Ver Mensaje
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.
  #6 (permalink)  
Antiguo 11/05/2008, 05:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: cambiar fondo de links al pasar el raton por encima

Cita:
Iniciado por Squizophrenia Ver Mensaje
.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.
  #7 (permalink)  
Antiguo 11/05/2008, 10:37
Avatar de Squizophrenia  
Fecha de Ingreso: mayo-2008
Ubicación: Barcelona (Spain)
Mensajes: 41
Antigüedad: 9 años, 7 meses
Puntos: 2
Re: cambiar fondo de links al pasar el raton por encima

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;}

Última edición por Squizophrenia; 11/05/2008 a las 10:50 Razón: Corregido
  #8 (permalink)  
Antiguo 11/05/2008, 12:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: cambiar fondo de links al pasar el raton por encima

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.
  #9 (permalink)  
Antiguo 11/05/2008, 12:53
Avatar de Squizophrenia  
Fecha de Ingreso: mayo-2008
Ubicación: Barcelona (Spain)
Mensajes: 41
Antigüedad: 9 años, 7 meses
Puntos: 2
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).
  #10 (permalink)  
Antiguo 11/05/2008, 13:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #11 (permalink)  
Antiguo 11/05/2008, 13:32
Avatar de Squizophrenia  
Fecha de Ingreso: mayo-2008
Ubicación: Barcelona (Spain)
Mensajes: 41
Antigüedad: 9 años, 7 meses
Puntos: 2
Re: cambiar fondo de links al pasar el raton por encima

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
  #12 (permalink)  
Antiguo 11/05/2008, 13:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: cambiar fondo de links al pasar el raton por encima

Cita:
Iniciado por Squizophrenia Ver Mensaje
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.

Cita:
Iniciado por Squizophrenia Ver Mensaje
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.
  #13 (permalink)  
Antiguo 11/05/2008, 13:51
Avatar de Squizophrenia  
Fecha de Ingreso: mayo-2008
Ubicación: Barcelona (Spain)
Mensajes: 41
Antigüedad: 9 años, 7 meses
Puntos: 2
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.
  #14 (permalink)  
Antiguo 11/05/2008, 16:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: cambiar fondo de links al pasar el raton por encima

Cita:
Iniciado por Squizophrenia Ver Mensaje
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:34.