Foros del Web » Creando para Internet » CSS »

a hover se corta con imagen

Estas en el tema de a hover se corta con imagen en el foro de CSS en Foros del Web. Hola, Mi problema es que creé un enlace para cerrar una ventana y le puse una imagen que al pasar el raton por encima la ...
  #1 (permalink)  
Antiguo 31/01/2011, 06:00
 
Fecha de Ingreso: mayo-2010
Mensajes: 29
Antigüedad: 7 años, 6 meses
Puntos: 0
a hover se corta con imagen

Hola,
Mi problema es que creé un enlace para cerrar una ventana y le puse una imagen que al pasar el raton por encima la sustituye por otra. En iexplorer me funciona bien pero en firefox al poner el ratón encima la imagen sale cortada y se desplaza hacia abajo y no sé porqué:

Aqui el codigo:

<div class="barrap">
<a href="javascript:window.close();"><img src="Images/cerrar1.png" width="33" height="31" alt="Cerrar ventana" border="0"></img></a>
</div>


El css es este:

a:link a:visited
{
width:33px;
height:31px;
border:0px solid;
display:block;
}

a:hover
{
background-image:url(Images/cerrar2.png);
}

a:hover img
{
background: transparent;
visibility: hidden;
}


Gracias.
  #2 (permalink)  
Antiguo 31/01/2011, 10:18
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: a hover se corta con imagen

En mi Firefox la imagen parpadea al pasar por encima en lugar de desaparecer todo el tiempo. Al usar imágenes diferentes el comportamiento puede variar. Algo está funcionando mal en Firefox o si lo prefieres, no está funcionando todo lo bien que debiera.

Yo suelo usar este otro método y creo que da menos problemas:
- Creo un fichero con una imagen transparente .gif o .png. Suelo usarla de 1px por 1px para poder reutilizarla, pero puedes darle el tamaño que quieras. Imagina que la llamas transparente.gif. En la etiqueta o en el CSS le das a esta imagen el ancho y alto que necesites.
- Al enlace le doy un background para el estado :link y otro para el estado :hover y :active. No hace falta declarar el display:block ni darle el tamaño de la imagen. Se ajustará automáticamente. Supongo que funcionaría igual usando el background de la imagen.
  #3 (permalink)  
Antiguo 31/01/2011, 20:53
Avatar de stingofung  
Fecha de Ingreso: enero-2011
Ubicación: Mcbo
Mensajes: 52
Antigüedad: 6 años, 10 meses
Puntos: 1
Respuesta: a hover se corta con imagen

Saludos "cham",

Prueba sustituir a:hover actual por este:

Código CSS:
Ver original
  1. a:hover
  2. {
  3. width:33px;
  4. height:31px;
  5. background-image:url(Images/cerrar2.png);
  6. }

Comenta a ver que tal.
  #4 (permalink)  
Antiguo 01/02/2011, 03:05
 
Fecha de Ingreso: mayo-2010
Mensajes: 29
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: a hover se corta con imagen

Gracias por vuestras aportaciones, pero no he conseguido solucionarlo aún.

Si le pongo el ancho y el alto en el hover como dices tu stingofung no me sale, y el otro metodo de la imagen transparente como me dices tu sanxoan, el enlace no me aparece y cuando pongo el raton encima me sale la imagen y en firefox me sigue saliendo igual.

De todas formas voy a utilizar otro método de enlace y este lo abandono por imposible.

Gracias por vuestro tiempo

Etiquetas: corta, hover
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 15:12.