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 mitposition:absolute;
gemacht. Als Alternative eignet sich auchvisibility:hidden / visible
, da bereits im unsichtbaren Fall der benötigte Platz reserviert ist.)
Wenn man sich darauf beschränkt, sollte man keine Probleme haben.
Demo für den Hover-Effekt
Datei betrachten (HTML, 5.35 KiB)
Bisherige Kommentare (1)
Kommentar von Pablo
Sehr schön gemacht ganz unten auf der Seite. lol
Kommentar verfassen
Bisherige Trackbacks (0)
Es wurde noch kein Trackback empfangen!