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

[webnoob]

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

[imho_tep]

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.

Hallo Reto,

gib den Links per CSS die Eigenschaft "display.block", dann sollte es klappen

Best wishes, imho_tep

[Gunnar Bittersmann]

Hello out there!

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

Verweise einbinden.

Gibt es irgendeine Möglichkeit, den Link-Bereich anders zu vergrössern?

Ja, wie [imho_tep] schon sagte: .navi a {display: block}

Das solltest du auch *unbedingt* tun, denn für den Benutzer ist es verwirrend, wenn er mit dem Mauszeiger in der 'li'-Box ist und diese die Farbe ändert, beim Click aber nichts passiert, weil er nicht in der 'a'-Box ist.

Oder gibt es eine Möglichkeit, die Hover-Effekte zu verknüpfen?

Ja, du solltest die Wechsel von Text- und Hintergrundfarbe auf dasselbe Element beziehen; also nicht den einen auf 'li', den anderen auf 'a'; sondern beide entweder auf 'li' oder auf 'a'. Da IEs zu blöd für 'li:hover' sind, fällt die Möglichkeit weg. Also:

.navi a {  
  display: block;  
  background-color: #D1B946;  
  color: #004E96;  
}

(Mit dem Nachfahrenselektor bist du vertraut? [CSS2 §5])

Dann könntest du auch den Code entschlacken, er krankt an Divitis [Wikipedia]. Und besonders umfangreiche Stylesheets (Warum hast du eigentlich mehrere 'style'-Elemente?) sollten in eine externe Datei ausgelagert werden [SELFHTML]; dann müssen der ganze Code nur einmal zum Client übertragen werden, außerdem Änderungen für alle Seiten der Site nur an einer Stelle vorgenommen werden.

See ya up the road,
Gunnar