Umriss wird durch das nächste Element verdeckt

Lesezeit: 2 Minuten

Ich habe eine Reihe von Bildern, die jeweils in einen Link eingebunden sind.

Ich möchte, dass um jedes Bild ein gepunkteter Umriss erscheint, wenn ich die Maus bewege.

Das Problem ist, dass der Umriss auf der rechten Seite auf allen außer dem letzten Bild fehlt.

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

Wie auch immer, um einen Umriss auf allen 4 Seiten erscheinen zu lassen, wenn ich den Mauszeiger bewege?

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

Ich habe dies auf FF14, Chrome, IE9 ausprobiert.

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

@Brandon, das dachte ich mir. Und dann habe ich wieder auf „Ausführen“ geklickt, und plötzlich waren gültige Bilder da.

– David Thomas

3. August 2012 um 19:57 Uhr
@Brandon, das sind gültige Bilder. Oder gibt es einen besseren Weg, dies zu tun?

– Spinnenpflanze0

3. August 2012 um 20:10 Uhr
@spiderplant0, nein, es war mein Fehler. Die Bilder sind tatsächlich gültig, ich musste nur zuerst JSFiddle ausführen. Verzeihung.

– Brandon

3. August 2012 um 20:11 Uhr

Der einfachste Weg ist die Zuweisung position: relative zum a Elemente, und erhöhen Sie dann die z-index des a > img:hover (anstatt die zu stylen a:hover:

a > img {
    position: relative;
}

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

JS Fiddle-Demo.

Einfach hinzufügen position: relative; z-index: 1000 zu ihren :hover Stil: aktualisierte Geige

Aktualisiert: Eigentlich braucht man die gar nicht z-indexdie relative Positionierung von selbst erreicht Ihr Ziel.

Was Sie tun könnten, ist, jeden Bildrand so einzustellen, dass er unabhängig von der Hintergrundfarbe 1 Pixel groß ist, und dann einschalten img:hover Sie setzen die Grenze zu dem, was Sie wollen. Hier ist eine funktionierende jsFiddle von dem, worüber ich spreche:
http://jsfiddle.net/P3WBG/12/

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

– Brandon

3. August 2012 um 20:00 Uhr
Wie deckt das die Anforderung ab, dass Bilder keinen Abstand zwischen sich haben müssen?

– lanz

3. August 2012 um 20:03 Uhr
Das war nie eine Anforderung, die Anforderung war, dass sie lückenlos aneinander stoßen. Mine produziert keine Lücken und funktioniert ohne Verwendung von a position: relative Hack, den ich zu vermeiden versuchte.

– Vap0r

3. August 2012 um 20:05 Uhr
Für mich nicht geeignet, fürchte ich, da die Bilder aneinanderstoßen müssen, da sie Teil eines größeren nahtlosen Bildes sind (ich hätte wohl expliziter sein sollen). Danke trotzdem.

– Spinnenpflanze0

3. August 2012 um 20:09 Uhr
Es ist sehr explizit: I need the images to butt up to each other without gaps. Du produzierst Hintergrund ohne Lücken, nicht Bilder ohne Zwischenraum; Bei Verwendung mit nicht transparenten Bildern, die eigentlich bis zum Rand Inhalt haben, weisen sie sehr deutliche Lücken auf.

– lanz

3. August 2012 um 20:10 Uhr

14452600cookie-checkUmriss wird durch das nächste Element verdeckt

#CSS #html #Umriss