✔ Beim Drüberfahren anderes Element verändern

[SilentWarrior]

Guten Abend, Community

Ich bastel derzeit ein bisschen an meiner HP und bin dabei (mal wieder) auf ein CSS-Problem gestossen. Zunächst einmal die Situation: Meine Navigation sieht folgendermassen aus:

<h1>Menüpunkt 1</h2>
<ul>
<li>...</li>
<li>...</li>
</ul>
<h1>Menüpunkt 2</h2>
<ul>
<li>...</li>
<li>...</li>
</ul>
<h1>Menüpunkt 3</h2>
<ul>
<li>...</li>
<li>...</li>
</ul>
...

Jetzt würde ich mir gerne ein Dropdown-Menü mit CSS zusammenstellen (ich weiss, dass ich da noch ein Extra-JS für den IE schreiben muss, aber darum geht's nicht). Die Listen werden also zunächst mit display:none ausgeblendet und sollen bei h1:hover eingeblendet werden - und genau da hakt's bei mir. Ich hab keine Ahnung, wie ich CSS beibringen soll, dass es beim Überfahren eines bestimmten Elements Eigenschaften eines völlig anderen Elements auf der Seite verändern soll - in diesem Fall die Sichtbarkeit (bzw. Anzeigeart).

Gibt es da überhaupt eine Möglichkeit? Ich hab mal im CSS-Forum nach hover gesucht und unzählige Threads durchgelesen, aber meist ist das Problem ja, dass man entweder den Linktext selbst oder aber ein Hintergrundbild ändern will, und das geht ja direkt so:

a:hover { background-image:url('hover.gif'); }

Das kann ich aber nicht brauchen, da ich ein anderes Element ändern will. Wenn ich die Elementnamen einfach hintereinander notiere, sucht CSS nach einer Liste innerhalb von h1, aber ich kann die Liste ja nicht einfach in die Überschrift reinnehmen.

Ideal wäre es natürlich, wenn es in CSS eine Möglichkeit gäbe, auf das nächste Element zuzugreifen (denn natürlich soll immer nur die nächste Liste (im Quelltext) angezeigt werden). Wenn das nicht geht, muss ich halt alle Listen und Überschriften noch mit Ids benennen, das sollte aber auch kein allzugrosses Problem sein.

Also dann, ich hoffe mal, die Pros hier können mir helfen. ;-)

MfG

SilentWarrior

 

[Gumbo]

Probier mal folgende Eigenschaften:

* {
	margin:			0;
	padding:		0;
}
ul {
	display:		none;
}
h1:hover + ul,
ul:hover {
	display:		block;
}

 

[SilentWarrior]

Jaha, unglaublich, es funktioniert! *freu* Vielen vielen Dank!

 

[Maik]

Wow, ich hätte nicht gedacht, dass es dafür eine CSS-Technik gibt ... - thanx @ gumbo

greez, maik.l

 

[SilentWarrior]

Ein kurzer Nachtrag noch:

Ich hab das jetzt auch mal auf anderen Browsern getestet - dass (all)es im IE nicht funktioniert, war ja eh klar. Was mich aber überrascht hat, war das Verhalten von Opera. Dort funktioniert die Definition ohne :hover wunderbar:

#navigation h1 + ul {
	background:#999;
}

Sobald man jedoch ein :hover an h1 anhängt, klappt es nicht mehr. Schade eigentlich, dass die Umsetzung dieses hilfreichen Selektors so mangelhaft implementiert wurde, damit würden sich zahlreiche neue Möglichkeiten eröffnen.

Wollte das nur noch kurz loswerden, damit sich nicht später jemand stundenlang darüber wundert, dass es bei ihm/ihr im Opera nicht geht.