CSS | Wenn ich über ein Bild mit dem Mausrahd fahre sollen sich 3 weitere Bilder öffnen | Wie mache ich das mit ":hover" ps. es soll keine neue seite geöffnet?

... komplette Frage anzeigen

2 Antworten


<style>
.versteckt {display:none}
.zeige:hover+div.versteckt {display:block}
</style>

<img class="zeige" alt="" src="bild.jpg" height="200" width="300">
<div class="versteckt">
<img alt="" src="bild1.jpg" height="200" width="300">
<img alt="" src="bild2.jpg" height="200" width="300">
<img alt="" src="bild3.jpg" height="200" width="300">
</div>


(Mann, der Editor ist ja schrottig!)

Antwort bewerten Vielen Dank für Deine Bewertung

Denke immer daran. Es ist eine Sache der Anordnung. Nutze dafür Selektoren.
Die bekanntesten sind der child-Selektor (element > element) und neighbor-Selektor (element + element). Über Selektoren greifst du auf andere Elemente zu. In diesem Fall willst du das erst bei einem hover auslösen. Steht also dein hover-Element im DOM genau neben den zu öffnenden Bildern, sähe es wie folgt aus: element:hover + img {
display: block;
}
Dabei werden alle img tags, die sich neben dem hover-Element befinden, wieder angezeigt.

Am häufigsten kennt man den child-Selektor wohl aus einem Menü mit zweiter Ordnung. ul li:hover > ul li {
display: block;
}

Antwort bewerten Vielen Dank für Deine Bewertung