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 bspw. in langen Tabellen den Lesefluss fördern. Im Grunde lassen sich aber grundsätzlich alle Elemente auf der Webseite mit diesem Effekt belegen.

Wie du auch einen solchen Effekt in deine Website einbauen kannst, zeige ich dir anhand des folgenden CSS Snippets.

 

Hover-Effekt mit CSS in die Website einbauen

Du kannst dich an dem folgenden Snippet orientieren, um den Effekt auch für deine Website zu nutzen.

 

Beispiel:

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

<p>Dies ist dabei nur ein Vorführtext für den Hover-Effekt</p><br />
<table>
  <tr>
    <td>In einer Tabelle funktioniert es hingegen nicht, da der Effekt nur für Text 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. Du kannst das Snippet somit ganz einfach auf deine Bedürfnisse anpassen.

 

Hinweis:

Bitte beachte, dass nicht immer alle Browser die CSS Befehle gleich umsetzen. Aus diesem Grund solltest du CSS Effekte immer mit verschiedenen Browsern testen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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