Luggi: Listen

SELF-Forum

Listen

Luggi
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Listen

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@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'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Listen

      Matthias Apsel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      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

      --
      1/z ist kein Blatt Papier.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Listen

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@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'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln