css a: texto e imágenes del estilo de enlace

Tengo preguntas rápidas sobre css que me molestan, y parece que no puedo entenderlo en este momento.css a: texto e imágenes del estilo de enlace

He diseñado los enlaces en mi página para que tengan un borde inferior al pasar el mouse, pero el borde inferior aparece en la imagen que también tiene enlaces y no puedo encontrar la manera de evitar que aparezca el borde en las imágenes.

Esto es lo que tengo actualmente.

#main a:hover { 
    border-bottom:solid 1px #7b9a04; 
    color:#333; 
} 

img, img a:hover { 
    border-bottom:none; 
}

Sin embargo, esto no parece funcionar. No creo que sea otro estilo que lo anule, porque si elimino el estilo #main a: hover, las imágenes ya no tienen el borde inferior, pero ninguno de los demás enlaces del sitio lo hace.

Fuente

2010-09-21 Adam

Bueno, 'img un: hover' definitivamente no va a funcionar, ya que' etiquetas img' no pueden tener descendencia. –

'a img: hover' o' a: hover img' son mejores :) De todos modos, un 'border-bottom' en un enlace ... ¿no es un' text-decoration: underline', sabes ... estilo predeterminado de un enlace. – Shikiryu

Prefiero usar borde inferior porque le da un poco más opciones que solo texto-decoración: subrayado. Con el borde puede ajustar el grosor y hacerlo de un color diferente, luego el texto completo. – Adam

El problema es con el elemento de enlace <a>, no con el propio enlace de la imagen. Cuando especifica un borde inferior para el estado de desplazamiento de <a>, también se aplica al enlace que contiene la imagen. Entonces cuando pasas el mouse sobre dicho enlace (que contiene una imagen), es el enlace que muestra el borde inferior. No es la imagen

Sin embargo, hay una solución para esto. Trate de aplicar:

a img { 
    display: block; 
    }

Esto restablecerá el estilo <a>. Hay una advertencia para este método — que al usar esto con imágenes en línea podría romper el diseño. Entonces úsalo con moderación.

Fuente

2011-05-23 16:33:40 immysl

Esto funcionó para mí. Como mencionaste, creo que otras respuestas aquí no se dieron cuenta de que el problema era con el enlace, no con la imagen. – KobeJohn

Esto parece una solución bastante pésima ya que obligará a todas sus imágenes con enlaces a bloquearse de manera predeterminada ¿no? ¿Sería una mejor opción colocar una clase específica en elementos que vinculen imágenes y orientarlo de esa manera? – Cameron

-1

De acuerdo con css specificity debería funcionar siempre que ponga el borde de la imagen css después del otro css.

Como un lado, no hay necesidad de tener p y td separados de esa manera.

#main a { 
    color:#7b9a04; 
    text-decoration:none; 
} 

#main a:hover { 
    color:#333; 
    border-bottom:solid 1px #7b9a04; 
}

Es realmente todo lo que necesita.

Fuente

2010-09-21 23:47:07 Galen

Gracias por el consejo. Sigo teniendo el problema y el borde de la imagen aparece después del otro estilo de enlace. Tal vez es algún tipo de problema de almacenamiento en caché. Lo probaré en otra máquina por la mañana. – Adam

-1

¿qué hay de las imágenes que definen explícitamente que no tienen borde, después de la declaración de desplazamiento?

#main a:hover { 
    border-bottom: solid 1px #7b9a04; 
} 

img { 
    border: none; 
}

Fuente

2010-09-22 08:46:08 espais

Parece que no ayuda. Estoy perdido con esto. – Adam

@Adam: puede compartir un enlace a su página o compartir su html/css, existe la posibilidad de que algo más lo esté anulando – espais

No creo que esto funcione ya que el borde se aplica al enlace, no a la imagen . – KobeJohn

¿Qué tal

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

Fuente

2016-08-21 04:05:45

css a: texto e imágenes del estilo de enlace

Respuesta

Cuestiones relacionadas