Cómo cambiar el fondo de colores en enlaces de texto en vuelo estacionario, pero no imagen Conexiones

Question

Tengo una regla CSS como esto:

a:hover { background-color: #fff; } 

Pero esto resulta en un mal aspecto hueco en el fondo de los enlaces de imagen, y lo que es aún peor, si tengo imágenes transparentes, el color de fondo del enlace se puede ver a través de la imagen.

he topado con este problema muchas veces antes, pero siempre resuelto utilizando el método rápido y sucio de la asignación de una clase de enlaces de imagen:

a.imagelink:hover { background-color: transparent; } 

Hoy en día yo estaba buscando una manera más elegante solución a este problema cuando me encontré con this.

Básicamente lo que sugiere es usar display: block, y esto realmente resuelve el problema de las imágenes no transparentes. Sin embargo, resulta en otro problema: ahora el enlace es tan ancho como el párrafo, aunque la imagen no lo es.

¿Hay una buena manera de resolver este problema, o tengo que usar el enfoque sucio otra vez?

Gracias,

Answer 1

traté de encontrar algún selector que obtendría sólo <a> elementos que no tienen <img> descendientes, pero no pude encontrar ninguna .. . Acerca de las imágenes con esa brecha parte inferior, se puede hacer lo siguiente:

a img{vertical-align:text-bottom;} 

Esto debe deshacerse del fondo que muestra detrás de la imagen, pero es posible que pierda la disposición (por no mucho, sin embargo), por lo ten cuidado.

Para las imágenes transparentes, debe usar una clase.

Realmente espero que se solucione en CSS3, mediante la implementación de un selector principal.

Answer 2

idea no probado:

a:hover {background-color: #fff;} 
img:hover { background-color: transparent;} 

Answer 3

El siguiente debe funcionar (no probado):

Primero

a:hover { background-color: #fff; } 

Entonces

a:imagelink:hover { background-color: inherit; } 

La segunda regla anulará la primera para < a class = "imagelink" etc.> y conservará el color de fondo del elemento primario.

Intenté hacer esto sin la clase = "", pero no puedo encontrar un selector de CSS que sea opuesto a foo> bar, que estiliza una barra cuando es hija de un foo. Usted querría diseñar el foo cuando tiene un hijo de la barra de clase. Puede hacer eso e incluso cosas más elegantes con jQuery, pero eso puede no ser deseable como una técnica general.

Answer 4

puede usar display: inline-block pero eso no es completamente crossbrowser. IE6 e inferior tendrán un problema con él.

Supongo que tiene espacios en blanco entre <a> y <img>? Trate de no incluir que de esta manera:

<a><img /></a>

Answer 5

estoy confundido en lo que está denominando "enlaces de imagen" ... es que una etiqueta 'img' en el interior de un ancla? ¿O está configurando la imagen en CSS?

Si va a configurar la imagen en CSS, entonces no hay problema aquí (puesto que ya es capaz de dirigirse a ella) ... así que debo asumir decir:

<a ...><img src="..." /></a> 

A lo cual , Le sugiero que especifique un color de fondo en la imagen ...Por lo tanto, suponiendo que el contenedor está en debe ser de color blanco ...

a:hover { background: SomeColor } 
a:hover img { background-color: #fff; } 

Answer 6

por lo general hacer algo como esto para eliminar el hueco debajo de las imágenes:

img { 
    display: block; 
    float: left; 
} 

Por supuesto, esto no siempre es la solución ideal, pero que está bien en la mayoría de las situaciones.

Answer 7

Tuve este problema hoy y utilicé otra solución que display: block gracias al enlace de asker. Esto significa que puedo conservar el enlace SOLO en la imagen y no expandirlo a su contenedor.

Las imágenes están en línea, por lo que tienen espacio debajo de ellas para la parte inferior de letras como "y, j, g". Esto posiciona las imágenes en baseline, pero puede modificarlo si no tiene <a>TEXT HERE</a> como con un logotipo . Sin embargo, todavía necesita enmascarar el espacio de línea de texto y es fácil si utiliza un color normal como fondo (por ejemplo, en body o div#wrapper).

body { 
    background-color: #112233; 
} 
a:hover { 
    background-color: red; 
} 
a img { 
    border-style: none; /* not need for this solution, but removes borders around images which have a link */ 
    vertical-align: bottom; /* here */ 
} 
a:hover img { 
    background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */ 
} 

Answer 8

De esta manera funciona mucho mejor.

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] { 
    text-decoration: none; 
    border: 0 none; 
    background-color: transparent; 
    } 

No hay clases engorrosas que se deben aplicar a cada imagen. Descripción detallada aquí:

http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/

Answer 9

Yo tenía el mismo problema. En mi caso, estoy usando la imagen como fondo. Hice lo siguiente y resolvió mi problema:

background-image: url(file:"use the same background image or color");