css - quitar - como poner color a las letras en html

Cómo cambiar el color de fondo en los enlaces de texto en los enlaces emergentes pero no en los enlaces de imagen

Question

Tengo una regla de CSS como esta:

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

Pero esto da como resultado una brecha de mal aspecto en la parte inferior de los enlaces de imagen, y lo que es peor, si tengo imágenes transparentes, el color de fondo del enlace se puede ver a través de la imagen.

He tropezado con este problema muchas veces, pero siempre lo resolví usando el enfoque rápido y sucio de asignar una clase a enlaces de imágenes:

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

Hoy estaba buscando una solución más elegante a este problema cuando tropecé con esto .

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

Idea no probada:

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

Answer 2

Lo siguiente debería funcionar (no probado):

Primero tú

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

Entonces tú

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 lo opuesto a foo> bar, que estiliza una barra cuando es hija de un foo. Querrá darle un estilo al foo cuando tenga una barra hija 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 3

Estoy confundido con lo que denominas "enlaces de imágenes" ... ¿es eso una etiqueta ''img'' dentro de un ancla? ¿O está configurando la imagen en CSS?

Si está configurando la imagen en CSS, entonces no hay ningún problema aquí (ya que puede orientarla) ... así que debo suponer que quiere 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 en el que se encuentra debe ser blanco ...

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

Answer 4

Intenté encontrar un selector que obtuviera solo <a> elementos que no tienen descendientes <img> , pero no pudo encontrar ninguno ... Sobre las imágenes con ese espacio inferior, podría hacer lo siguiente:

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

Esto debería eliminar el fondo que aparece detrás de la imagen, pero puede deshacerse del diseño (aunque no mucho), así que ten cuidado.

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

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

Answer 5

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

Supongo que tienes espacios en blanco entre <a> y <img> ? intente eliminar eso así:

<a><img /></a>

Answer 6

Normalmente hago algo como esto para eliminar la brecha en las imágenes:

img {
display: block;
float: left;
}

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

Answer 7

Tuve este problema hoy, y utilicé otra solución aparte de display: block gracias al enlace de asker. Esto significa que puedo retener el enlace SÓLO 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 la baseline , pero puede modificarlas 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 deben aplicarse a cada imagen. Descripción detallada aquí:

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

Answer 9

Yo tuve 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");