Wie pop ich auf dem Mouseover eines div nur mit CSS ein Bild in einem separaten div up?

https://stackoverflow.com/questions/108461

01-07-2019
|

Frage

Ich habe eine kleine Galerie von Thumbnails. Wenn ich meinen Mauszeiger über ein Miniaturbild platzieren würde Ich mag ein Bild in voller Größe in einem div in der oberen rechten Ecke des Bildschirms Pop-up haben. Ich habe dies nur CSS getan gesehen mit und ich würde hinunter diesen Weg gehen möchten, anstatt verwenden Sie Javascript, wenn möglich.

Lösung

reiner CSS Popups2 , aus dem gleichen Ort, die uns Complexspiral bringen . Beachten Sie, dass dieses Beispiel tatsächliche Navigations-Links als umgerollten Element verwendet. Wenn Sie nicht wollen, dass, kann es einige Klebrigkeit in Bezug auf IE-Versionen führen.

Die Grundtechnik ist jedes Bild in einem Link-Tag mit einem tatsächlichen href zu bleiben (sonst einige IE-Versionen werden vernachlässigt: schweben)

<a href="#">Text <img class="popup" src="pic.gif" /></a>

und positionieren Sie es geschickt mit absoluter Position. Blenden Sie das Bild zunächst

a img.popup { display: none }

und dann auf den Link Überschlags, stellen Sie ihn bis erscheinen.

a:hover img.popup { display: block }

Das ist die grundlegende Technik, aber es gibt immer größere Positionierung Grenzen gehen zu sein, da den Image-Tag in dem Link-Tag verweilt. Siehe den Link für weitere Details; er nutzt etwas ein wenig komplizierter als Display. keines das Bild auszublenden

Andere Tipps

CSS Spielplatz für diese Art von Ding rein CSS verwendet, einer der Demos ist sicherlich zu helfen Sie und wie sie alle CSS sind nur Quelle anzeigen zu lernen - Sie wahrscheinlich die verwendet werden sollen. schweben Pseudo-Klasse, aber es gibt Grenzen, um es je nach verwendetem Browser-Targeting

Eric Meyers reine CSS Popups 2 Demo ähnlich genug klingt was Sie wollen.

Hier sind einige Beispiele:

Das letzte wirkt auf Klick. Nur um vollständig in Verhaltensweisen.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow