list-style Eigenschaft ändern

[Dominik]

Hallo,

kann mir bitte jemand sagen wie ich die list-style Eigenschaft ändern kann, solange der Anwender gerade mit der Maus über ein <li></li> Tag fährt?

Vielen Dank,

DQ

[afra]

Hallo DQ!

kann mir bitte jemand sagen wie ich die list-style Eigenschaft ändern kann, solange der Anwender gerade mit der Maus über ein <li></li> Tag fährt?

Mit der Pseudoklasse Hover.

Vielen Dank,

Gerne geschehen

Schönen Gruß

Afra

[Elya]

Hallo afra,

kann mir bitte jemand sagen wie ich die list-style Eigenschaft ändern kann, solange der Anwender gerade mit der Maus über ein <li></li> Tag fährt?

Mit der Pseudoklasse Hover.

Ist die list-style-Eigenschaft nicht den Elementen <ul> oder <ol> zugeordnet? Dann bringt das hovern über das li m.E. nicht viel.

Um diesen Effekt zu erreichen, ist es vermutlich eher ratsam, mit Hintergrund-Bildern in den <li> zu arbeiten, die bei :hover verändert werden (am besten in der Position und nicht im url, damit es keine Ladezeiten gibt) - und zu beachten, daß nicht jeder Browser :hover außerhalb von Links interpretiert. Also den Effekt auf den Link, nicht auf das <li> anwenden.

Gruß aus Köln-Ehrenfeld,

Elya

[afra]

Hallo Elya!

Der Einwand mit der nicht interpretierten :hover Pseudoklasse in den IE Versionen unter 7 ist natürlich gerechtfertigt. Für FF 1.5 und Opera konnte ich gerade in einem kurzen Test ermitteln, dass es sehr wohl wie von mir beschrieben klappt.

<style type="text/css">
 .styletype {
 list-style-type: disc;

}
 li:hover {
 list-style-type: circle;
 }
</style>

<ul class="styletype">
 <li>eins</li>
 <li>zwei</li>
 <li>drei</li>
</ul>

So wird bei einem Hovern in den oben genannten Browsern immer der List-Style-Type geändert.

Schönen Gruß

Afra

[Elya]

Hallo afra,

Für FF 1.5 und Opera konnte ich gerade in einem kurzen Test ermitteln, dass es sehr wohl wie von mir beschrieben klappt.

und klappt nicht nur, es validiert sogar - das war mir nicht bewußt, danke für den Hinweis.

Gruß aus Köln-Ehrenfeld,

Elya