CSS- link di testo di destinazione con bordo inferiore al passaggio del mouse, ma collegamenti immagine senza bordi

Question

Mi piacerebbe essere in grado di indirizzare i link di testo in CSS con bordo inferiore su passaggio del mouse, ma avere tutti i collegamenti che sono immagini non hanno un bordo al passaggio del mouse. Quindi:

<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 

Ho provato questo CSS:

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

Ma questo non funziona ... l'ancora deve essere mirata, piuttosto che l'immagine, penso. Ho dato la caccia a Google e nessuno sembra sapere come fare, tranne il targeting del collegamento dell'immagine con una classe o un ID specifico, o utilizzando display: block.

Ma, non posso usare queste soluzioni poiché il contenuto è in un CMS, quindi non voglio che l'utente debba assegnare una classe a ciascuna immagine che inseriscono. E mostra: il blocco non funzionerà perché non so se sarebbe appropriato per ogni immagine che l'utente vuole visualizzare.

Infine, mi piacerebbe essere in grado di farlo in semplice CSS (senza Javascript). Forse non c'è modo ... ma qualsiasi aiuto o idee che hai sarebbe molto apprezzato!

Answer 1

Siamo spiacenti, quello che ci si vuole è una sorta di: genitore pseudo-classe che seleziona il bambino, ma si applica al genitore, che purtroppo non esiste (nemmeno in CSS3).

Dovresti eseguire un po 'di Javascript, selezionando tutti gli elementi corrispondenti a #barra laterale a: hover, quindi applicare il bordo inferiore rosso a condizione che non abbiano un elemento IMG figlio.

Answer 2

Questo non è possibile con CSS puro senza aggiungere nuovi tag. Per fare ciò con puro CSS/HTML, è necessario aggiungere un tag al collegamento [a href] dell'immagine o aggiungere un tag ai collegamenti [a hrer] che si desidera visualizzare con una sottolineatura.

Si potrebbe scrivere una piccola parte di codice in javascript che altererebbe facilmente la proprietà border di un elemento su hover. Dovresti solo controllare se l'elemento è un IMG.

Answer 3

Questo in realtà sembra essere un problema piuttosto difficile. Hai qualche possibilità di modificare il codice CMS? Diventa facile se riesci a fare qualcosa come avvolgere uno <span> intorno a qualsiasi testo all'interno di link (e lasciare immagini al di fuori di quelli). Quindi tutto quello che devi fare è scegliere come target #sidebar a:hover span per avere il bordo.

Se non è possibile modificare il codice, non sono sicuro che sia possibile. Di sicuro non riesco a trovare nulla.

Answer 4

Non è possibile indirizzare un elemento a seconda di quali elementi figlio ha, quindi è necessario aggiungere qualcosa al codice per indirizzare i diversi collegamenti.

Non è possibile utilizzare la sottolineatura anziché il bordo inferiore? Ciò funzionerebbe come è applicato al testo nel link piuttosto che all'elemento link stesso.

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

Answer 5

Questo potrebbe funzionare

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

Ciò renderebbe l'immagine coprire il confine, anche se sarebbe spostata verso il basso un pixel o in modo permanente.

Answer 6

Prova questo trucco. Funziona.

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

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

Un altro modo - PHP:

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

Answer 7

Per quanto riguarda va JavaScript, suggerirei usando jQuery per aggiungere una classe a tutti i link che contengono un'immagine:

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

(Il selettore :has è una cosa jQuery, non è presente nei CSS.)

Quindi regola di conseguenza il tuo foglio di stile.

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

Answer 8

E 'possibile con css3 utilizzando a:not(img) a:hover {style:whatever;}, ma ci sono considerazioni. Ecco una spiegazione con le immagini: http://nerdinprogress.blogspot.com/2010/11/target-text-links-but-not-images-with.html

Answer 9

Il modo più semplice è quello di utilizzare

:hover (text-decoration: underline} 

anche vedere

text-underline-position 

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