denegro.com

Color de fondo en imágenes dentro de enlaces

May 17th, 2006 3 comentarios

Suele pasar, al menos en Firefox y similares. Definimos mediante css un color de fondo para el estado hover de los enlaces

a:hover {
background: red
}
a.ejemplo:hover {background: red}(enlace de ejemplo)

y, cuando anidamos una imagen dentro de un enlace nos encontramos con el efecto no deseado:

<a href="http://google.com"><img src="http://www.google.com/images/logo_sm.gif" /></a>
imagen para ilustrar el ejemplo(enlace + imagen de ejemplo)

Por mucho que intentamos quitarle el color de fondo o márgenes a la imagen, el color no desaparece:

a {
padding: 0
}
a:hover img {
background-color: transparent;
margin: 0
}

Lo que está pasando es, por una parte, que el color de fondo lo tiene el enlace, y no la imagen, y por otra que la imagen está por encima de la linea base del enlace. La solución es fácil:
a:hover {
background: red
}
a img {
vertical-align: bottom
}

imagen para ilustrar el ejemplo (enlace + imagen de ejemplo)

  • Pablo

    Coño, justo lo que estaba buscando… y venga a ponerle height al enlace.
    Gracias.

  • Me ha gustado tu blog bastante, no lo conocía y me lo he topado en ovillo. Te pongo en lecturas diarias.
    Un saludo

  • genial. por fin puedo ponerle backgrounds a mis hover…

    que oxidadito que llevo el cese ese pardiez.

    merci!