brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Hovereffekte 2nd Edition

von Thomas Salvador.

Im Artikel "Der Hover Effekt" wurde dieser Effekt vorgestellt und erläutert, wie man ihn implementiert und welchen Sinn und Zweck er hat. 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.

Farbänderung

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

<style type="text/css"><!--
  a:hover {color: #farbe}
//-->
</style>
Ein Beispiel
Hover in Aktion
Die syntaktische Form
Ein Beispiel
Hover in Aktion

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: #farbe}
//-->
</style>
Ein Beispiel
Hover in Aktion
Die syntaktische Form
Ein Beispiel
Hover in Aktion

Hintergrund 2

Wie Hintergrund, jedoch wird beim OnMouseOver zusätzlich die Unterstreichung entfernt, die man in dem Moment nicht mehr benötigt.

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

//-->
</style>
Ein Beispiel
Hover in Aktion
Die syntaktische Form
Ein Beispiel
Hover Only!

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.

<style type="text/css"><!--
  a:hover {font-weight: bold}
//-->
</style>
Ein Beispiel
Hover in Aktion
Die syntaktische Form
Ein Beispiel
Hover in Aktion

Size

Beim OnMouseOver wird hier der Text größer. Theoretisch nur in entsprechend aufbereitetet Tabellen einsetzbar.

<style type="text/css"><!--
  a:hover {font-size: 110%;}
//-->
</style>
Ein Beispiel
Hover in Aktion
Die syntaktische Form
Ein Beispiel
Hover in Aktion

Size und Weight

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

<style type="text/css"><!--
  a:hover {font-size: 110% font-weight: bold;}
//-->
</style>
Ein Beispiel
Hover in Aktion
Die syntaktische Form
Ein Beispiel
Hover in Aktion

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


Verwandte Artikel und Seiten




brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 18. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/20.html .