CSS

Hover-Effekt mit CSS

Details
Veröffentlicht am Sonntag, 19. Oktober 2008 19:59
Geschrieben von Jan Pionzewski

Mit CSS lassen sich auch sogenannte "Hover-Effekte" erzeugen. Dabei wird der Hintergrund eines Elementes beim Überfahren mit dem Mauszeiger farblich geändert.
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.

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ühreffekt 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 werden alle Texte beim Überfahren mit dem Mauszeiger mit einem Hellblauen Hintergrund belegt. In der Tabelle funktioniert dieser Effekt in diesem Fall nicht, da der Hover-Effekt nur für das Element <p> definiert wurde. Natürlich lässt sich der Effekt auch auf alle anderen Elemente anwenden.



Kommentar schreiben

Sicherheitscode
Aktualisieren