list-style-image mittels a:hover

[freakXHTML]

Hallo zusammen,
ich möchte, dass beim Überfahren mit dem Mauszeiger eines Listenelements ein eigenes Listenbild erscheint. Leider passiert bei mir einfach nichts. Könnt ihr mir helfen, meinen Fehler zu finden? So sieht mein Quelltext aus:

<ul style="text-align:center;" >
    <li id="navilist" style="margin-left:1px;"><a href="#">Home</a></li>
    <li id="navilist"><a href="#">Rubrik 1</a></li>
    <li id="navilist"><a href="#">Rubrik 2</a></li>
    <li id="navilist"><a href="#">Rubrik 3</a></li>
    <li id="navilist"><a href="#">Rubrik 4</a></li>
    <li id="navilist"><a href="#">Kontakt</a></li>
   </ul>

#navilist a:hover{list-style-image: url(list.jpg);font-weight:bold; color:#4B2013; border-left:5px dotted black;border-right:5px dotted black;}

Alle Effekte bis auf das eigene Listenelemt werden beim Überfahren mit dem Mauszeiger angezeigt! Wo liegt hier der Fehler?

Vielen Dank
lg, freakXHTML

PS. Kann ich irgendwie das ständige Zuweisen der gleichen ID verbessern? Das ist doch eher schlechter Stil!?

 

[_Thor_]

Alle Effekte bis auf das eigene Listenelemt werden beim Überfahren mit dem Mauszeiger angezeigt! Wo liegt hier der Fehler?

list-style-image lässt sich nur auf Listen anwenden, nicht auf die Listenelemente, wenn du beim hover ein anderes Bild haben möchtest, solltest du mit Hintergrundbildern arbeiten und list-style-type: none verwenden.

PS. Kann ich irgendwie das ständige Zuweisen der gleichen ID verbessern? Das ist doch eher schlechter Stil!?

Ja, nimm uterschiedliche id's ;) oder eine Klasse, die kannst du mehreren Elementen zuordnen.

 

[Bernhard]

Kann ich irgendwie das ständige Zuweisen der gleichen ID verbessern? Das ist doch eher schlechter Stil!?

Du kannst auch der Liste eine ID (oder eine Klasse) geben:

<ul id="navilist">
    <li><a href="#">Home</a></li>
    <li><a href="#">Rubrik 1</a></li>
    <li><a href="#">Rubrik 2</a></li>
    <li><a href="#">Rubrik 3</a></li>
</ul>

CSS:

ul#navilist{
text-align:center;
}
ul#navilist li a:hover{
}