JavaScript-Events in Kombination mit Pseudoklassen

Wer seine Desktop-Website ein bisschen aufpeppen möchte, hat die Möglichkeit sich an Pseudoklassen wie bspw. :hover zu bedienen. Mittels dem sogenannten Hover-Effekt kann man unter anderem, beim Darüberfahren mit der Maus, den Farbwechsel eines Elements- oder einen Bildwechsel hervorrufen. Will man mehrere Effekte gleichzeitig auf einem Element anwenden, kann man sich zusätzlich an Javascript-Events bedienen.
Das onmouseover-Event-Attribut hat dieselbe Funktion wie der Hovereffekt und kann zugleich mit dem Hover-Befehl fungieren, wodurch man eindrucksvolle Effekte und Aktionen erzielen kann.

Hier ein Beispiel eines JavaScript-Events in Kombination mit :hover :

onmouseover Event mit :hover

Im obigen Beispiel findet mittels :hover ein Wechsel des Hauptbildes statt und gleichzeitig wird ein weiteres Bild eingeblendet, welches sich über einen padding-left-Befehl um einige Pixel von links nach rechts bewegt und über eine Animation einen Shake-Effekt bewirkt.
Zusätzlich findet über das Javascript-Event ein Farbwechsel bzw. Bildwechsel der darüber laufenden Grafik statt.

JavaScript-Event – onclick

Weiters kann man sich an einem onclick-Event-Attribut bedienen, welcher per Mausklick ausgelöst wird.

Hier ein Beispiel mit zusätzlichem onclick-Befehl

Onclick

Mittels dem Onclick-Befehl wird das darüber laufende Bild von rechts nach links verschoben.

Es braucht nicht viel um auf seiner Seite eindrucksvolle Effekte zu erzielen.
Dies hier ist jedoch ein Beispiel für Desktop-Websites, da der Hovereffekt sowie auch das Javascript onmouseover-Event im Mobile-Design nicht funktionieren.

Verfasst von

Inns Web

Das junge Unternehmen Inns-Web, aus Innsbruck Tirol, bietet Ihnen professionell gestaltete Responsive-Websites auf HTML5 und CSS3 Basis.