CSS: enlaces de texto de destino con el borde inferior al pasar el ratón, pero enlaces de imagen sin borde

Question

Me gustaría poder orientar los enlaces de texto en CSS con borde inferior en el cursor, pero tienen todos los enlaces que no tienen imágenes un borde sobre el vuelo estacionario. Por lo tanto:

<a href="#"><img src="image.png" /></a> ==> this should not have a bottom-border on hover 
<a href="#">regular text link</a> ==> this should have a bottom-border on hover 

yo probamos este CSS:

#sidebar a:hover { 
    border-bottom: 1px dotted red; 
} 
#sidebar a:hover img { 
    border-bottom: none; 
} 

Pero esto no funciona ... el ancla tiene que ser dirigida en lugar de la imagen, creo. Estuve buscando en Google y nadie parece saber cómo hacerlo, excepto al orientar el enlace de la imagen con una clase o identificación específica, o al usar display: block.

Pero no puedo utilizar estas soluciones ya que el contenido está en un CMS, por lo que no quiero que el usuario tenga que asignar una clase a cada imagen que inserten. Y mostrar: bloque no funcionará porque no sé si eso sería apropiado para cada imagen que el usuario quiera mostrar.

Finalmente, me gustaría poder hacer esto en CSS simple (sin Javascript). Tal vez no hay forma ... ¡pero cualquier ayuda o idea que tenga será muy apreciada!

Answer 1

Lo sentimos, lo que se desea es una especie de: matriz pseudo-clase que selecciona el niño sino que se aplica a los padres, que por desgracia no existe (ni siquiera en CSS3).

Tendría que hacer un poco de Javascript, seleccionando todos los elementos que coincidan con #sidebar a: hover, luego aplique el borde inferior rojo en la condición de que no tengan un elemento IMG secundario.

Answer 2

Esto no es posible con CSS puro sin agregar nuevas etiquetas. Para hacer esto con CSS/HTML puro, necesitará agregar una etiqueta al enlace [a href] de la imagen ... o agregar una etiqueta a los enlaces [a hrer] que desee mostrar con un subrayado.

Podría escribir una pequeña porción de código en javascript que alteraría la propiedad de borde de un elemento en vuelo estacionario bastante fácilmente. Solo necesitaría verificar si el elemento es un IMG.

Answer 3

Esto realmente parece ser un problema bastante difícil. ¿Tienes alguna posibilidad de cambiar el código del CMS? Se vuelve fácil si puede hacer algo así como ajustar un <span> alrededor de cualquier texto dentro de los enlaces (y dejar imágenes fuera de esos). Entonces, todo lo que tiene que hacer es apuntar al #sidebar a:hover span para tener el borde.

Si no puede cambiar el código, no estoy seguro de si esto es posible. Estoy seguro de que no se me ocurre nada.

Answer 4

No puede segmentar un elemento según los elementos secundarios que tenga, por lo que debería agregar algo al código para orientar los diferentes enlaces.

¿No puedes usar el subrayado en lugar de un borde inferior? Eso funcionaría, ya que se aplica al texto en el enlace en lugar de al elemento de enlace en sí.

#sidebar a:hover { text-decoration: underline; } 
#sidebar a:hover img { text-decoration: none; } 

Answer 5

Esto podría funcionar

a img {position:relative; top: Npx}, where N is the hover border thickness 

Esto haría que la imagen de la portada de la frontera, a pesar de que se desplaza hacia abajo un píxel o menos permanente.

Answer 6

Pruebe este truco. Funciona.

a { text-decoration:none; border-bottom:2px solid; } 

a img { border:none; vertical-align:top; } 

Otra forma - PHP:

$text = preg_replace('#<a(.*?)<img(.*?)/>(.*?)</a>#is', "<a class='imgshow' \\1 <img\\2 />\\3</a>", $text); 

Answer 7

Por lo que va JavaScript, sugeriría el uso de jQuery para agregar una clase a todos los enlaces que contienen una imagen:

$('#sidebar a:has(img)').addClass('image-link'); 

(El selector :has es una cosa jQuery; no está presente en CSS).

Luego, ajuste su hoja de estilo en consecuencia.

#sidebar a:hover { 
    border-bottom: 1px dotted red; 
} 
#sidebar a.image-link:hover { 
    border-bottom: none; 
} 

Answer 8

Su posible con CSS3 utilizando a:not(img) a:hover {style:whatever;}, pero hay consideraciones. He aquí una explicación con imágenes: http://nerdinprogress.blogspot.com/2010/11/target-text-links-but-not-images-with.html

Answer 9

La forma más fácil es usar

:hover (text-decoration: underline} 

también ver

text-underline-position 

http://dev.w3.org/csswg/css3-text/#text-underline-position0