Hovereffekte 2nd Edition

Hier seien nun einige Alternativen zu dem nun doch etwas abgegriffenen Hover Effekt der Farbänderung vorgestellt. Bevor ich zu diesen komme, möchte ich jedoch darauf hinweisen, dass sie sich nicht alle immer und überall eignen.

Deshalb wird oft die Farbänderung das Non-Plus-Ultra bleiben, der aus diesem Grunde hier mit aufgeführt wird.

Die grundlegende Form ist, dass der Pseudo-Klasse :hover ein Styling zugewiesen wird, was dazu führt, dass beim MouseOver eine Stil-Änderung, d.h. Änderung der Formatierung vorgenommen wird.

Dabeu wird oft der a-Tag selbst angesprochen

a:hover {.. Formatierungsregeln ..}

Generell kann es aber alles sein, zum Beispiel ein Bild imgund ein generische div-Container.

img:hover, div:hover {.. Formatierungsregeln ..}

Farbänderung

Das ist sozusagen der Standard Hover Effekt. Beim OnMouseOver ändert der Link seine Farbe.

<style type="text/css"><!--
  a:hover {color: #rrggbb;}
//-->
</style>

Hintergrund

Auffälliges Feedback gibt dieser Hover Effekt, der beim OnMouseOver den Link mit einer Hintergrundfarbe hinterlegt. Idealer Einsatz in entsprechend aufbereiteten Tabellen, bei entsprechender Farbgebung aber auch so.

<style type="text/css"><!--
  a:hover {background: #rrggbb;}
//-->
</style>

Hintergrund 2

Wie Hintergrund, jedoch wird bei dem a Link generell die Unterstreichung entfernt:

<style type="text/css"><!--
  a {text-decoration: none;}
  a:hover {background: #rrggbb;}
//-->
</style>

Alternativ können Sie die Unterstreichung auch erst beim Hover entfernen.

<style type="text/css"><!--
  a:hover {background: #rrggbb; text-decoration: none;}
//-->
</style>

Weight

Hübsch ist dieser Hover Effekt, der beim OnMouseOver, den Text auf fett stellt. Ideal mit Gleichweitenschrift oder in Tabellen. Unmöglich mit Proportionalschrift im Fließtext, weil sich mit dem "Gewicht" der Schrift auch die Breite ändert, was zu Layout-Änderung führen kann.

<style type="text/css"><!--
  a:hover {font-weight: bold;}
//-->
</style>

Size

Beim OnMouseOver wird hier der Text größer. Mur in entsprechend aufbereiteteten Tabellen oder Containern einsetzbar, da die Größenänderung sonst zu Layout-Änderung führt.

<style type="text/css"><!--
  a:hover {font-size: 110%;}
//-->
</style>

Size und Weight

Die Kombination der letzten beiden ist sehr schön in Tabellen bzw. Containern machbar.

<style type="text/css"><!--
  a:hover {font-size: 110% font-weight: bold;}
//-->
</style>

Der erste Artikel brachte bereits eine Erläuterung zu Sinn und Zweck des Hover Effektes.