list-style-image von einzelnen <li>s ändern

[A-le-xan-der]

Moin,

ich habe ein Navigationsmenü (Liste) nach folgendem Schema in HTML gebastelt:

<ul class="menue">
<li class="menuebutton"><a href="1.htm">Seite 1</a></li>
<li class="menuebutton"><a href="2.htm">Seite 2</a>
<ul class="menue">
<li class="menuebutton"><a href="2b.htm">Unterseite 2b</a></li>
<li class="menuebutton"><a href="2c.htm">Unterseite 2c</a></li>
<li class="menuebutton"><a href="2d.htm">Unterseite 2d</a></li>
<li class="menuebutton">
</li>
<li class="menuebutton"><a href="3.htm">Seite 3</a>
<li class="menuebutton"><a href="4.htm">Seite 4</a>
</ul>

Die Liste ist per CSS so formatiert, daß anstelle des Standard-Aufzählungszeichens eine Grafik angezeigt wird:

.menue { list-style-image: url(grafik.gif) }

Funktioniert alles prima.
Nun möchte ich es aber so haben, daß beim Hovern die Grafik durch eine andere ersetzt wird, qusi so:

.menuebutton a:hover { list-style-image: url(grafik2.gif) }

Das funktioniert nur im MSIE bis Version 7, da list-style-image standardgemäß nicht auf <a> anwendbar ist, andere Browser zeigen also beim Hovern keine Änderung.
Wenn ich list-style-image auf <li> anwende ( .menue li:hover { (...) } ), funktioniert es zwar mit anderen Browsern, allerdings wird dann beim Hovern einer UNTERseite auch die direkt übergeordnete Seite als gehovert angezeigt (also beim Hovern von z.B. Seite 2b wird sowohl die Grafik von der Seite als auch die von Seite 2 ausgetauscht).
Dieses Verhalten der Browser ist korrekt - doch wie kriege ich es hin, daß auch bei Unterseiten nur die Grafik der jeweiligen Unterseite ausgetauscht wird?
Ich habe schon so lange rumprobiert, aber ich finde keine Lösung. (Es kann gerne mit CSS 3 sein, aber kein JavaScript oder PHP.) Die Variante, die jeweils beiden Grafiken mit CSS :before einzubinden möchte ich nicht machen; nur die Hovergrafik mit :before einzubauen klappt nicht, da die Hovergrafik dann zusätzlich zur normalen (daneben) angezeigt wird.

Hat jemand eine Idee?

[Beat]

Dieses Verhalten der Browser ist korrekt - doch wie kriege ich es hin, daß auch bei Unterseiten nur die Grafik der jeweiligen Unterseite ausgetauscht wird?

Wie wär's mit der Regel
.menubutton:hover{}

Einen workaround für MSIE kennst du ja.

mfg Beat

[A-le-xan-der]

Wie wär's mit der Regel
.menubutton:hover{}

Danke für die Antwort, aber das ist das gleiche wie
.menuebutton li:hover { }
, es wird also die direkt übergeordnete Seite "gehovert" angezeigt.
Problem ist ja, daß das <li> eines übergeordneten Eintrages nach HTML 4 erst NACH einer untergeordneten Liste wieder geschlossen wird:
<ul>
<li>1
 <ul><li>1b</li></ul>
</li>
<li>2</li>
</ul>

Einen workaround für MSIE kennst du ja.

Genau, der klappt auch.

[Beat]

Wie wär's mit der Regel
.menubutton:hover{}

Danke für die Antwort, aber das ist das gleiche wie
.menuebutton li:hover { }

Das sind Welten dazwischen.

, es wird also die direkt übergeordnete Seite "gehovert" angezeigt.
Problem ist ja, daß das <li> eines übergeordneten Eintrages nach HTML 4 erst NACH einer untergeordneten Liste wieder geschlossen wird:
<ul>
<li>1
<ul><li>1b</li></ul>
</li>
<li>2</li>
</ul>

Das ist nicht das Problem.
Das problem ist, wie Gunnar sagt, dass der User gleichzeitig über einer Unterliste und einer Liste mit gleichem Klassennamen hovert. Ändere das!

mfg Beat

[A-le-xan-der]

Das ist nicht das Problem.
Das problem ist, wie Gunnar sagt, dass der User gleichzeitig über einer Unterliste und einer Liste mit gleichem Klassennamen hovert. Ändere das!

Sorry, so ganz habe ich das nicht verstanden, was Du meinst.

Ich habe jetzt:

<ul class="liste">
<li><a href="1.htm">Seite 1</a></li>
<li><a href="2.htm">Seite 2</a>
 <ul>
 <li><a href="2b.htm">Unterseite 2b</a></li>
 <li><a href="2c.htm">Unterseite 2c</a></li>
 </ul>
</li>
<li><a href="3.htm">Seite 3</a>
</ul>

Und:

.liste, .liste ul { list-style-image: url(grafik.gif) }
.liste li:hover, .liste ul li:hover { list-style-image: url(grafik2.gif) } / ? */

Aber die Hoveranzeige klappt immer noch nicht.
Das mit der überflüssigen Klasse habe ich entfernt, danke, Gunnar.

[Beat]

<ul class="liste">
<li><a href="1.htm">Seite 1</a></li>
<li><a href="2.htm">Seite 2</a>
<ul>
<li><a href="2b.htm">Unterseite 2b</a></li>
<li><a href="2c.htm">Unterseite 2c</a></li>
</ul>
</li>
<li><a href="3.htm">Seite 3</a>
</ul>

.liste, .liste ul { list-style-image: url(grafik.gif) }
.liste li:hover, .liste ul li:hover { list-style-image: url(grafik2.gif) } / ? */

Aber die Hoveranzeige klappt immer noch nicht.

Mein Veständnis deines Wunschverhaltens klappt auch nicht!

Wann genau soll die Grafik von li.this geändert werden?

1. li.this:hover       [ ]Ja [ ]Nein
2. li.this > a:hover   [ ]Ja [ ]Nein
3. li.this > ul:hover  [ ]Ja [ ]Nein

Du siehst, nur 1) ist geeignet li.this umzuformatieren.

mfg Beat

[A-le-xan-der]

Es soll immer nur das "direkte" <li> geändert werden, keine übergeordneten <li>s! Wenn also beispielsweise Unterseite 2b gehovert wird, soll nur der <li> von Unterseite 2b gehovert werden, jedoch NICHT auch der <li> von Seite 2, in dem sich Unterseite 2b befindet.
Das ist das Problem.

<ul class="liste">
<li><a href="1.htm">Seite 1</a></li>
<li><a href="2.htm">Seite 2</a>
<ul>
<li><a href="2b.htm">Unterseite 2b</a></li>
<li><a href="2c.htm">Unterseite 2c</a></li>
</ul>
</li>
<li><a href="3.htm">Seite 3</a>
</ul>

.liste, .liste ul { list-style-image: url(grafik.gif) }
.liste li:hover, .liste ul li:hover { list-style-image: url(grafik2.gif) } / ? */

Aber die Hoveranzeige klappt immer noch nicht.

Mein Veständnis deines Wunschverhaltens klappt auch nicht!

Wann genau soll die Grafik von li.this geändert werden?

1. li.this:hover       [ ]Ja [ ]Nein
2. li.this > a:hover   [ ]Ja [ ]Nein
3. li.this > ul:hover  [ ]Ja [ ]Nein

Du siehst, nur 1) ist geeignet li.this umzuformatieren.

mfg Beat

[Beat]

Es soll immer nur das "direkte" <li> geändert werden, keine übergeordneten <li>s! Wenn also beispielsweise Unterseite 2b gehovert wird, soll nur der <li> von Unterseite 2b gehovert werden, jedoch NICHT auch der <li> von Seite 2, in dem sich Unterseite 2b befindet.
Das ist das Problem.

.deindirekteselement:hover{}

Für MSIE < 8 können wir mittels JS Klassen hinzufügen.

mfg Beat

[A-le-xan-der]

Es soll immer nur das "direkte" <li> geändert werden, keine übergeordneten <li>s! Wenn also beispielsweise Unterseite 2b gehovert wird, soll nur der <li> von Unterseite 2b gehovert werden, jedoch NICHT auch der <li> von Seite 2, in dem sich Unterseite 2b befindet.

.deindirekteselement:hover{}

Wie meinen?
Meinst Du so:
#seite2b:hover { list-style-image: url(grafik2.gif) }
?
Klappt doch nicht, da das <li> von Unterseite 2b im <li> von Seite 2 ist!

[Beat]

.deindirekteselement:hover{}

Wie meinen?
Meinst Du so:
#seite2b:hover { list-style-image: url(grafik2.gif) }
?
Klappt doch nicht, da das <li> von Unterseite 2b im <li> von Seite 2 ist!

Doch das klappt  ;)
Aber deine Klappe klappt falsch. Aber Versuchs bitte nicht mit funzt-net.

Im übrigen solltest du dich eventuell mit dem Thema Spezifität auseinandersetzen, sagt meine Glaskugel.

So und meine Geduld investiere ich nun wo anders.

mfg Beat

[A-le-xan-der]

Doch das klappt  ;)

Ich weiß nicht, was Du mir genau sagen willst, wie ich es machen kann. Aber alles, was ich nach Deiner Beschreibung ausprobiert habe, klappt eben nicht. Das Problem bleibt unverändert, es tut sich nichts.

[Gunnar Bittersmann]

@@A-le-xan-der:

nuqneH

<ul class="liste">

Das ist unsinnig. Alle 'ul'-Elemente sind Listen. Eine Klasse "liste" für ein 'ul'-Element sagt rein gar nichts aus. Außer, dass der Autor nicht weiß, wie man sinnvolle Klassennamen vergibt.

"navigation" könnte ein sinnvoller Klassenname sein oder kürzer "nav".

Aber die Hoveranzeige klappt immer noch nicht.

Kann auch nicht. Wenn das 'li'-Element 2b gehovert ist, dann ist auch das 'li'-Element 2 gehovert, denn ersteres liegt ja in letzterem. Es gibt in CSS keine Möglichkeit, im DOM aufwärts zu gehen à la 'li:hover<ul<li { list-style-image: url(grafik.gif) }'.

Du musst also den Effekt auf Elementtypen anwenden, wo das Element des Unterpunkts nicht in dem des übergeordneten Punktes enthalten ist. Die 'a'-Elemente bieten sich an; gib diesen die Grafik als Hintergrundbild, nicht 'list-style-image' für 'li'.

Und zwar eine Grafik, die beide Bilder enthält: CSS-Sprites [A List Apart, Webkrauts]

Qapla'

[A-le-xan-der]

Hallo.

<ul class="liste">

Das ist unsinnig. Alle 'ul'-Elemente sind Listen.

Das war ja nur ein beispielhafter Name.

Aber die Hoveranzeige klappt immer noch nicht.

Kann auch nicht. Wenn das 'li'-Element 2b gehovert ist, dann ist auch das 'li'-Element 2 gehovert, denn ersteres liegt ja in letzterem. Es gibt in CSS keine Möglichkeit, im DOM aufwärts zu gehen à la 'li:hover<ul<li { list-style-image: url(grafik.gif) }'.

Okay, schade, daß das nicht geht.

Du musst also den Effekt auf Elementtypen anwenden, wo das Element des Unterpunkts nicht in dem des übergeordneten Punktes enthalten ist. Die 'a'-Elemente bieten sich an; gib diesen die Grafik als Hintergrundbild, nicht 'list-style-image' für 'li'.

Dann werde ich mich damit mal befassen.

Danke.

Qapla'

Wie meinen?

[Auge]

Hallo

Qapla'

Wie meinen?

Fremdsprachenabstinenz? Das ist ein klingonischer Gruß. :-)

Tschö, Auge

[A-le-xan-der]

Tag.

Qapla'

Wie meinen?

Fremdsprachenabstinenz? Das ist ein klingonischer Gruß. :-)

Aha, verstehe.
Ich hatte das Schulfach "Klingonisch" bewußt abgewählt.

[Gunnar Bittersmann]

@@A-le-xan-der:

nuqneH

<ul class="menue">
<li class="menuebutton"><a href="1.htm">Seite 1</a></li>
<li class="menuebutton"><a href="2.htm">Seite 2</a>
<ul class="menue">
<li class="menuebutton"><a href="2b.htm">Unterseite 2b</a></li>
<li class="menuebutton"><a href="2c.htm">Unterseite 2c</a></li>
<li class="menuebutton"><a href="2d.htm">Unterseite 2d</a></li>
<li class="menuebutton">
</li>
<li class="menuebutton"><a href="3.htm">Seite 3</a>
<li class="menuebutton"><a href="4.htm">Seite 4</a>
</ul>

Wenn alle Geschwisterelemente derselben Klasse angehören, ist das ein sicheres Indiz dafür, dass die Klasse unsinnig ist.

Die 'li' lassen sich per Nachfahrenselektor '.menue li' selektieren.

Die Klasse "menue" für die inneren Listen ist auch überflüssig. Diese lassen sich ebenfalls per Nachfahrenselektor '.menue ul' selektieren, die äußere per Aufzählung mit dazu: '.menue, .menue ul'.

Qapla'