Gliederung durch das nächste Element verdeckt

Ich habe eine Reihe von Bildern, jeweils in einem Link verpackt.Gliederung durch das nächste Element verdeckt

Ich möchte einen gepunkteten Umriss um jedes Bild erscheinen, wenn ich die Maus schwebe.

Das Problem ist, die Kontur auf der RHS fehlt von allen außer dem letzten Bild.

Es ist, als ob die Bilder den Umriss des Bildes auf der linken Seite überlappen.

Wie auch immer, um eine Gliederung auf allen 4 Seiten erscheinen, wenn ich schweben?

(Ich brauche die Bilder lückenlos aneinander zu stoßen auf.)

ich versuchte, dieses auf FF14 out, Chrom, IE9.

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

Quelle

2012-08-03 spiderplant0

@Brandon, das ist, was ich dachte, Und dann klickte ich wieder auf "run" und plötzlich waren gültige Bilder da. –

@Brandon, das sind gültige Bilder. Oder gibt es einen besseren Weg? – spiderplant0

@ spiderplant0, nein, das war mein Fehler Bilder sind tatsächlich gültig, Ich musste das JSFiddle zuerst ausführen. Es tut uns leid. – Brandon

Der einfachste Weg ist position: relative die a Elemente zuweisen, und erhöht dann die z-index der a > img:hover (statt dem Styling die a:hover.

a > img { 
    position: relative; 
} 

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

JS Fiddle demo

Quelle

2012-08-03 20:01:04

Was Sie tun können jede Bilder Grenze gesetzt ist 1px solid zu sein, was auch immer die Hintergrundfarbe, dann auf img:hover setzen Sie die Grenze zu dem, was Sie wollen. Hier ist ein funktionierendes jsFiddle von dem, was ich spreche:
http://jsfiddle.net/P3WBG/12/

Quelle

2012-08-03 19:59:46 Vap0r

+1, das ist wahrscheinlich eine bessere Antwort als meine, und ein raffinierter kleiner Trick. – Brandon

Wie deckt das die Anforderung ab, dass Bilder keinen Abstand zueinander haben müssen? – lanzz

Das war nie eine Voraussetzung, die Voraussetzung war, dass sie ohne Lücken aufeinander stießen. Meins erzeugt keine Lücken und funktioniert ohne einen 'Position: relativen' Hack zu verwenden, den ich vermeiden wollte. – Vap0r

Fügen Sie einfach position: relative; z-index: 1000 ihren :hover Stil: updated fiddle

Aktualisiert: Eigentlich müssen Sie nicht sogar müssen die z-index, relative Positionierung erreicht selbst dein Ziel.

Quelle

2012-08-03 19:59:56 lanzz

Möchten Sie Ihren Downvote erklären? – lanzz

Ich? Nicht schuldig. – spiderplant0

Nicht Sie, wer auch immer entschieden hat, zu downvote. – lanzz

Gliederung durch das nächste Element verdeckt

Antwort

Verwandte Themen