Hover-Effekt mit CSS erzielen

Mit CSS lässt sich auch ein sogenannter „Hover-Effekt“ erzeugen. Dabei ändert sich die Hintergrundfarbe eines Elementes beim Überfahren mit dem Mauszeiger.

Dies könnte beispielsweise in Langen Tabellenzeilen den Lesefluss fördern. Im Grunde lassen sich mit diesem CSS-Befehl aber grundsätzlich alle Elemente auf der Webseite mit einem Hover-Effekt belegen.

 

CSS-Hover-Effekt in Website einbauen

Code-Beispiel:

<html>
<head>
<style type="text/css">
p:hover {
 background-color: lightblue;
}
</style>
<title>Hover-Effekt mit CSS</title>
</head>
<body>

<p>Dies ist ein Vorführtext für den Hover-Effekt</p><br />
<table>
  <tr>
    <td>In einer Tabelle funktioniert es hingegen nicht, nur im Text - weil es so definiert wurde</td>
  </tr>
</table>

</body>
</html>

 

Erläuterung:

In diesem Beispiel ist ein hellblauer Hover-Effekt  für alle Texte definiert. Dieser Effekt tritt in Kraft, sobald der Anwender mit dem Mauszeiger über den Text fährt. In der Tabelle funktioniert dieser Effekt in diesem Fall hingegen nicht, da dieser nur für das Element <p> definiert ist.

Der Effekt lässt sich natürlich auch auf so gut wie alle anderen HTML-Elemente anwenden.

 

Hinweis:

Bitte beachte, dass unter Umständen nicht alle Browser CSS-Effekte gleich interpretieren. Es empfiehlt sich daher immer, die Effekte mit verschiedenen Browsern zu testen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.