css un: testo e immagini stile di collegamento

Ho una domanda css veloci che mi rode, e io non riesco a capire in questo momento.css un: testo e immagini stile di collegamento

Ho stilizzato i collegamenti sulla mia pagina per avere un bordo inferiore sopra al passaggio del mouse, ma il bordo inferiore viene visualizzato sull'immagine che ha anche i collegamenti e non riesco a capire come mantenere il bordo dall'apparire sulle immagini.

Ecco cosa ho attualmente.

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

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

Tuttavia, questo non sembra funzionare. Non penso che sia un altro stile che lo sovrascrive, perché se rimuovo lo stile #main a: hover le immagini non hanno più il bordo inferiore, ma nessuno degli altri link sul sito fa allora.

fonte

2010-09-21 Adam

Beh, 'img un: hover' sicuramente non funzionerà, dato che' tag img' non possono avere discendenti. –

'a img: hover' o' a: hover img' sono migliori :) Ad ogni modo, un 'border-bottom' su un link ... non è un' text-decoration: underline', sai ... stile di default di un link. – Shikiryu

Preferisco usare border-bottom perché ti dà un po 'più di opzioni rispetto alla semplice text-decoration: underline. Con il bordo puoi regolare lo spessore e renderlo di un colore diverso rispetto al testo. – Adam

Il problema è con l'elemento di collegamento <a>, non con il collegamento immagine stessa. Quando si specifica un bordo inferiore per lo stato di passaggio del mouse di <a>, si applica anche al collegamento che contiene l'immagine. Quindi, quando si passa il mouse su un tale link (contenente un'immagine), è il collegamento che mostra il bordo inferiore. Non l'immagine.

C'è una correzione per questo però. Provate ad applicare:

a img { 
    display: block; 
    }

Questo resetta il <a> styling. C'è un avvertimento per questo metodo — utilizzando questo con immagini in linea potrebbe interrompere il layout. Quindi usalo con parsimonia.

fonte

2011-05-23 16:33:40 immysl

Questo ha funzionato per me. Come hai detto, penso che altre risposte qui non si rendessero conto che il problema era con il link, non con l'immagine. – KobeJohn

Questo sembra una soluzione alquanto pessima in quanto forzerà tutte le immagini con i collegamenti a essere bloccati per impostazione predefinita, giusto? Un'opzione migliore sarebbe mettere una classe specifica sugli elementi che collegano le immagini e le indirizzano in questo modo? – Cameron

-1

Secondo css specificity dovrebbe funzionare fino a quando si mette il cx dell'immagine dopo l'altro css.

Per inciso non c'è bisogno di avere p e td separati così.

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

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

È davvero tutto ciò che serve.

fonte

2010-09-21 23:47:07 Galen

Grazie per il suggerimento. Sto ancora avendo il problema e il bordo dell'immagine viene dopo l'altro stile di collegamento. Forse è una specie di problema di cache. Lo proverò su un'altra macchina al mattino. – Adam

-1

per quanto riguarda la definizione in modo esplicito immagini per avere nessun bordo, dopo la dichiarazione hover?

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

img { 
    border: none; 
}

fonte

2010-09-22 08:46:08 espais

Non sembra aiutare. Sono in perdita su questo. – Adam

@ Adamo: si può o condividere un link alla tua pagina o condividere la html/css, v'è la possibilità che qualcosa d'altro è prevalente è – espais

Non credo che questo funziona in quanto il confine viene applicato al link, non l'immagine . – KobeJohn

Come su

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

fonte

2016-08-21 04:05:45

css un: testo e immagini stile di collegamento

risposta

Problemi correlati