Listen
Luggi
- css
Hallo, ich habe ein Problem mit CSS.
Und zwar habe ich eine Liste aus <ul> <li> mit der ich mein Menü baue.
Das Basisproblem besteht jetzt darin:
Ich habe 2 verschiedene Einträge. z1 und z2. Sobald ich mit der Maus über z2 fahren (hover) soll z1 eine Eigenschaft ändern, in diesem Falle visibility: hidden.
An dieser Codestelle:
li.z2:hover
{
visibility: hidden;
background: #00FF00;
}
sollte eigentlich sowas stehen:
li.z2:hover .. z1 (allerdings gibt ein kein .. zurück operator)
{
visibility: hidden;
background: #00FF00;
}
Hier der Code:
<html>
<head>
<style>
li.z1
{
visibility: visible;
background: #FF0000;
}
li.z2
{
visibility: visible;
background: #00FF00;
}
li.z2:hover
{
visibility: hidden;
background: #00FF00;
}
</style>
</head>
<body>
<ul>
<li class="z1">Eintrag 1</li>
<li class="z2">Eintrag2</li>
</ul>
</body>
</html>
Jemand eine Idee wie man das Lösen kann?
Gruß Andreas
@@Luggi:
nuqneH
Ich habe 2 verschiedene Einträge. z1 und z2. Sobald ich mit der Maus über z2 fahren (hover) soll z1 eine Eigenschaft ändern, in diesem Falle visibility: hidden.
Vorwärts immer (.z1:hover+.z2
), rückwärts nimmer.
Du könntest vielleicht beim Hovern über die Liste alle Items unsichtbar machen außer dem einen, über das gehovert wird:
ul:hover li
{
color: transparent;
}
ul li:hover
{
color: inherit;
}
Dann sollte aber gewährleistet sein, dass die li-Boxen die gesamte ul-Box ausfüllen, sonst dürfte es sehr verwirrend sein, wenn gar nichts mehr sichtbar ist.
<li class="z1">Eintrag 1</li>
<li class="z2">Eintrag2</li>
Wären hier nicht eher IDs denn Klassen angebracht (wenn sie denn überhaupt benötigt werden)?
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Vorwärts immer (
.z1:hover+.z2
), rückwärts nimmer.
a) Du weißt, auf wen dieser Spruch zurückgeht?
b) Gar kein Hinweis auf CSS4?
Matthias
@@Matthias Apsel:
nuqneH
Vorwärts immer […], rückwärts nimmer.
a) Du weißt, auf wen dieser Spruch zurückgeht?
Ja, klar.
b) Gar kein Hinweis auf CSS4?
Sozialismus ist Utopie genug. ;-)
Qapla'