Ein Element mit Inline-CSS schweben lassen

In diesem Tutorial werden einige Methoden vorgestellt, mit denen Sie mithilfe von Inline-CSS über ein Element schweben können.

Verwenden Sie die JavaScript-Ereignisse onMouseOver und onMouseOut, um mit Inline-CSS einen Hover-Effekt zu erzeugen

Es ist einfach, den Hover-Effekt auf ein Element anzuwenden, während Sie ein externes CSS verwenden. Wir können dies beispielsweise wie folgt erreichen:

a{
 color:red;
}
a:hover{
 color:blue;
}

Wenn wir die Maus auf das Element a bewegen, ändert sich die rote Farbe in blau.

Hier haben wir den :hover-Selektor verwendet, um das Element unserer Wahl auszuwählen. Aber wir können den Selektor :hover nicht in Inline-CSS schreiben.

Dies liegt daran, dass das Inline-CSS nur die Stile unterstützt, sodass wir den Selektor nicht schreiben können. Aber wir können den Hover-Effekt immer noch mit Inline-CSS simulieren.

Dazu benötigen wir die JavaScript-Events onMouseOver und onMouseOut. Das Event onMouseOver wird ausgeführt, wenn wir den Mauszeiger auf ein Element bewegen.

Ebenso wird das Ereignis onMouseOut ausgeführt, wenn wir den Mauszeiger von einem Element wegbewegen. Wir können diese Ereignisse als Attribut des Anker-Tags verwenden und die Farbe des Textes festlegen.

Beispielsweise können wir beim Bewegen der Maus über den Text mit dem Event onMouseOver eine Farbe und mit dem Event onMouseOut eine andere Farbe setzen. Mit dem Schlüsselwort this können wir die Eigenschaften style und color aufrufen und dann eine Farbe zuweisen.

Erstellen Sie beispielsweise ein Anker-Tag mit dem Text Click Here und verwenden Sie das Ereignis onMouseOver als Attribut des Anker-Tags. Setzen Sie den Wert auf this.style.color und geben Sie dem Event onMouseOut den Farbcode #f00 und den Farbcode #000.

Wenn wir die Maus auf den Text Click Here bewegen, wechselt die Farbe auf Rot. Und wenn wir die Maus vom Text entfernen, ändert sich die Farbe in Schwarz.

Auf diese Weise können wir die JavaScript-Ereignisse verwenden, um den Hover-Effekt mit dem Inline-CSS zu simulieren.

Beispielcode:

<a href="#"
 onMouseOver="this.style.color='#f00'"
 onMouseOut="this.style.color='#000'" >
 Click Here
</a>