renephoenix.de

Probleme mit dem Hover-Effekt

Hover-Effekte sind toll. Besonders seit es sie im CSS-Standard gibt, erfreuen sie sich großer Beliebheit. Leider sind diese Effekte nicht überall vorteilhaft eingesetzt. Die wichtigste Regel bei deren Verwendung: die äußeren Eigenschaften des Objektes sollten sich nicht verändern!

In einer kleinen Demonstration habe ich die schlimmsten Fehler zusammengestellt. Allen voran: der ungewollte Zeilenumbruch und das Nachrutschen des nachfolgenden Textes. Im ungünstisten Fall sind die Links nicht begehbar – oder man hat die aktuelle Leseposition mit den Augen verloren.

Folgende Attribute können unbedenklich eingesetzt werden:

  • color:red;
  • text-decoration:underline;
  • background:url() green;
  • background-position (sehr elegant!)
  • cursor:crosshair; (auch wenn es sinnlos ist)

Folgende Elemente können eingesetzt werden, wenn man Nebenwirkungen ausschließt:

  • border:2px solid red; (wenn auch ohne hover der benötigte Platz reserviert war)
  • display:block; (wird gerne im Zusammenhang mit position:absolute; gemacht. Als Alternative eignet sich auch visibility:hidden / visible, da bereits im unsichtbaren Fall der benötigte Platz reserviert ist.)

Wenn man sich darauf beschränkt, sollte man keine Probleme haben.

Bisherige Kommentare (1)

Kommentar verfassen

Freiwillige Angabe
Freiwillige Angabe
Der Text kann mit Textile formatiert werden, z.B. *fett* _kursiv_ "link":url. Wie das geht?
Wieviel ist 40 plus 2?

Bisherige Trackbacks (0)

Es wurde noch kein Trackback empfangen!