[CSS] mit Hover visibility eines andren Elementes ändern

Webdesign & Technik HTML & CSS
1

Hi, ich hoffe man versteht den Titel…
Zu Anfang: ich habe schon gegoogelt und die Forensuche bemüht, aber ich finde nicht, was ich suche.
Ich will, dass beim Hover von einem Element (navi) die visibility eines andren elementes geändert wird, mein html code:

[code]


Platzhalter
Platzhalter Platzhalter
[/code]

Ausschnitt aus CSS Datei:

[code]div.navi {
height: 40px;
width: 150px;
border: 1px solid blue;
}

div.navi:hover {
height: 200px;
width: 150px;
border: 1px solid blue;
div.hn1 {
visibility:visible;
}
}

div.hn1 {
visibility:hidden;
}[/code]

Leider klappt das nicht. Die unteren 2 Bilder bleiben versteckt…

Danke schonmal :hail:

2

Das geht so nicht.

Was geht ist das:

<div class="container">
  <img class="top" />
  <img class="hidden" />
</div>
div.container {}
div.container img.top { }
div.container .hidden {visibility: hidden; }

div.container:hover .hidden {visibility: visible; }
3

div.navi:hover { height: 200px; width: 150px; border: 1px solid blue; div.hn1 { visibility:visible; } }
Du musst dich schon an die Syntax halten, die CSS vorgibt - und nicht dir selber eine ausdenken …

Sowas kann man bspw. über den Nachfahrenselektor machen:

Dieser Selektor wirkt auf alle DIV-Elemente mit der Klasse hn1, die sich in einem DIV-Element mit der Klasse navi befinden, für das gerade der Zustand :hover gilt.

Und mach dir auch Gedanken darüber, wann es sinnvoll ist, Klassen zur Formatierung zu nutzen, und wann IDs.

4

Vielen Dank, damit klappts