denegro.com | alberto romero

Color de fondo en imágenes dentro de enlaces

May 17th, 2006

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

(enlace + imagen de ejemplo)