Sehr beliebt ist, daß man das Wort einfach fett macht: (Effekt tritt auch mit anderen Eigenschaften aus, z.B. text-transform:capitalize)
Gefährlich ist diese Variante, wenn ein Wort durch diese Hervorhabung auf die nächste Zeile rutscht. Durch den hover-Effekt entsteht ein Zeilenumbruch - und der Zeilenumbruch hebelt den hover-Effekt wieder aus, was zur Folge hat, daß der Zeilenumbruch rückgängig gemacht wird - und der hover-Effekt wieder eintritt. Wenn man Pech hat, ist der Link dann unbenutzbar!
Das Verändern der Schriftgröße sieht man auch gerne wieder. Dabei wird eine Zeile größer - und folglich rutschen alle anderen nach ein paar Pixel nach unten - und das sieht ehrlich gesagt unschön aus! In der Demo betrifft das nur eine Zeile - bei den meisten rutscht die ganze Zeile nach unten. Man kann es aber puffern: mit der Eigenschaft line-height gibt man die maximal benötigten Pixel in einer Zeile an. Dann kann nichts mehr nach unten rutschen. Beachte aber denoch, daß der erste Effekt nicht eintritt!
Besonders angenehm ist der Effekt im Fließtext. Wenn man liest - man berührt mit der Maus einen Link - und plötzlich verutscht der Inhalt
Auch das Hinzufügen von Rändern wird gern gemacht. Auch auch hier können die Buchstaben sich bewegen. Den unschönen Effekt kann man umgehen, in dem der Rand bereits ohne der hover-Eigenschaft schon existierte - aber unsichtbar ist. Die Eigenschaft border-style:hidden; macht es möglich:
Allerdings interpretiert der InternetExplorer diese Eigenschaft nicht. Solltest du noch nicht zu den Webgestaltern gehören, denen die Macken dieses Browsers irgendetwas egal sind, mußt du auf andere Methoden zurückgreifen. Z.B. kann man den Rand der Farbe des Hintergrundes anpassen
Auch die Seitengröße sollte durch hover sich nicht verändern - man sieht es leider trotzdem immer wieder. Es ist schon ein unschöner Effekt, wenn der Scrollbalken sich verändert. Die Demo findet ihr in der letzten Zeile.
Ihr seht: es gibt einige unschöne Dinge. Am besten, ihr laßt alle Eingriffe, die das äußere Erscheinungsbild verändern weg - dann habt ihr keine Sorgen. Übrigens: die hier vorgestellten Dinge beziehen sich nicht nur auf :hover. Auch bei :active (angeklickte Verweise) und :focus (bekommen Focus z.B. über Tabreihenfolge) treten diese Effekte auf.
Geschrieben von René Pönitz