bei einem mouseover auf einen Link Icon einblenden

[nadjak]

Hallo,

ich würde gerne ein Icon (immer das gleiche) bei Mouseover auf die Navipunkte einblenden. Muß ich das Icon vor jeden Link (ist nur Schrift) auf unsichtbar setzen oder kann ich nur eines nehmen und das mit css direkt vor die Schrift platzieren?
 Ich hoffe ich habe mich verständlicha ausgedrückt.
Danke schonmal für die Hilfe
Nadja

[Gunnar Bittersmann]

@@nadjak:

nuqneH

ich würde gerne ein Icon (immer das gleiche) bei Mouseover auf die Navipunkte einblenden. Muß ich das Icon vor jeden Link (ist nur Schrift) auf unsichtbar setzen oder kann ich nur eines nehmen und das mit css direkt vor die Schrift platzieren?

Letzteres.

Dein Markup sieht ja in etwa so aus (lies: es sollte so aussehen):

<ul id="nav">  
  <li><a href="foo">foo</a></li>  
  <li><a href="bar">bar</a></li>  
  <li>baz</li>  
  <li><a href="quz">quz</a></li>  
</ul>

Beachte, dass die aktuelle Seite (hier: baz) im Menü nicht verlinkt ist.  (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Styles:

ul#nav  
{  
  list-style: none;  
  padding: 0;  
}  
  
ul#nav li  
{  
  margin: 0;  
}  
  
ul#nav a  
{  
  display: block;  
  padding-left: 42px; /* Breite des Icons plus etwas Zwischenraum */  
}  
  
ul#nav a:hover  
{  
  background: url(icon) no-repeat;  
}

Qapla'