webnoob: Schrift-Hover-Effekt bei <li>-Hover-Effekt gleichzeitig

Beitrag lesen

Hallo!

Ich versuche, einen Hover-Effekt auf Schriftfarbe und Hintergrundfarbe zu erzielen. Die Farben werden dabei "getauscht" (d.h. blau wird gold, gold wird blau).

Das Problem an der Sache ist, dass die Texte Hyperlinks sind (Das ganze ist die Navigation), und der Hover-Effekt auf dem Link erst wirksam wird, sobald der Mauszeiger auf dem Link ist. So sieht man den Text noch gar nicht.

Ich habe mittels "Padding" versucht, den Bereich des Links zu vergrössern. (z.B. a.link:hover = padding-right:100px;)
Das funktioniert jedoch nicht, da dann der Bereich zu gross wird oder ein Umbruch bei einem mit Leerschlag vorhandenen Link erzeugt wird (z.b. "Über uns").

Die Seite mit der Navigation links:
http://server-r005.hostpoint.ch/~lenherr/lang_de/index.php

Gibt es irgendeine Möglichkeit, den Link-Bereich anders zu vergrössern?
Oder gibt es eine Möglichkeit, die Hover-Effekte zu verknüpfen?

Ich habe lange im Internet danach gesucht und mir verschiedenste Überlegungen gemacht, aber komme nicht weiter.

Kann mir jemand helfen?
Danke fürs lesen!

Grüsse
Reto