Verschiedene Hover-Effekte über Klassen steuern?

[Mitternacht]

Ich würde hier -> worttransport.ch/index_kopie.php gerne die Links in 5 Kategorien aufteilen, die erst beim Drüberfahren mit der Maus durch unterschiedliche Farben erkennbar wären.
Ich dachte, ich kann das lösen, indem ich den einzelnen Links eine Klasse zuweise <span class="xyz"> und im Stylesheet dann für diese Klassen jeweils eine neue Textfarbe als Hover-Effekt angebe. Wie muss ich das schreiben?

Ich habe es versucht mit:

Code: Alles auswählen

.editorial a:hover {
   color: #f76967;
   padding-bottom:1px;
   border-bottom:2px solid #f76967;
}

Und umgekehrt mit:

Code: Alles auswählen

a:hover.editorial  {
   color: #f76967;
   padding-bottom:1px;
   border-bottom:2px solid #f76967;
}

Beides funktioniert nicht.

[sejuma]

Code: Alles auswählen

a.editorial:hover

Code: Alles auswählen

<a href="#" class="editorial">Linktext</a>

siehe http://www.ohne-css.gehts-gar.net/0003.php

[Mitternacht]

Super, vielen Dank für deine Hilfe.