Struttura nascosta dall'elemento successivo

Ho una fila di immagini, ciascuna avvolta in un collegamento.Struttura nascosta dall'elemento successivo

Desidero che venga visualizzato un contorno tratteggiato attorno a ciascuna immagine quando si passa il mouse.

Il problema è che la struttura sul RHS manca a parte l'ultima immagine.

È come se le immagini si sovrappongano al contorno dell'immagine alla sua sinistra.

In ogni caso, per far apparire un contorno su tutti e 4 i lati quando passo il mouse?

(Ho bisogno delle immagini intromettermi fino a vicenda senza lacune.)

ho provato questo su FF14, cromo, IE9.

http://jsfiddle.net/spiderplant0/P3WBG/

fonte

2012-08-03 spiderplant0

@Brandon, questo è quello che ho pensato E poi ho fatto di nuovo clic su "Esegui" e, all'improvviso, c'erano immagini valide. –

@Brandon, sono immagini valide oppure esiste un modo migliore per farlo? – spiderplant0

@ spiderplant0, no è stato un mio errore. le immagini sono effettivamente valide, Ho solo bisogno di eseguire il JSFiddle prima. Scusate. – Brandon

Il modo più semplice è quello di assegnare position: relative agli a elementi, e quindi aumentare la z-index del a > img:hover (invece di styling dei a:hover:.

a > img { 
    position: relative; 
} 

a > img:hover { 
    outline: 3px dotted blue; 
    z-index: 3000; 
}

JS Fiddle demo

fonte

2012-08-03 20:01:04

Che cosa si potrebbe fare è impostare ogni confine immagini per essere 1px solid qualunque sia il colore di fondo è, poi su img:hover si imposta il confine per ciò che si desidera. Ecco una jsFiddle di lavoro di quello che sto parlando:
http://jsfiddle.net/P3WBG/12/

fonte

2012-08-03 19:59:46 Vap0r

+1, questa è probabilmente una risposta migliore della mia e un piccolo trucchetto. – Brandon

In che modo copre il requisito che le immagini debbano avere distanza zero tra loro? – lanzz

Questo non è mai stato un requisito, il requisito era che si mettessero l'uno contro l'altro senza lacune. Il mio non produce spazi vuoti e funziona senza dover usare un 'position: relativo' hack, che stavo cercando di evitare. – Vap0r

Basta aggiungere position: relative; z-index: 1000 alla loro :hover stile: updated fiddle

Aggiornato: In realtà, non è nemmeno necessario il z-index, posizionamento relativo da solo realizza il tuo obiettivo.

fonte

2012-08-03 19:59:56 lanzz

Cura di spiegare il tuo downvote? – lanzz

Me? Non colpevole. – spiderplant0

Non tu, chiunque abbia deciso di votare meno. – lanzz

Struttura nascosta dall'elemento successivo

risposta

Problemi correlati