Begriffe Grundgerüst Wichtige HTML-Tags CSS Arbeitsaufträge

Hover

Bei vielen Elementen ist es möglich, dass ihr Aussehen sich verändert, sobald der Mauszeiger über dem Element befindet. Dies geschieht mit hover und kann nur in-document oder extern definiert werden, also nicht in-line.

Im header dieser Webseite wurde der hover-Effekt wie folgt definiert:

<style type="text/css">
  #hover_demo:hover {
    color: darkred;
    background-color: darkgrey;
    text-shadow: 35px 25px 2px rgba(0, 0, 0, 0.5);
  }
</style>

Im Header h1-Element steht folgendes:

<h1 id="hover_demo" style="padding:50px">Bewege den Mauszeiger über diesen Text!</h1>

Erklärungen

• Die id des h1-Elements ist hover_demo. Im style-Teil kann mit Hilfe dieser ID dieses Element "gestylt" werden (#hover_demo).
• Durch Anfügen des Schlüsselwortes :hover wird festgelegt, dass diese Formatierung nur dann auftritt, wenn der Mauszeiger über dem Element ist. Das heisst, immer wenn der Mauszeiger über dem Text ist, wird die Schriftfarbe auf dunkelrot und die Hintergrundfarbe auf dunkelgrau gesetzt und zusätzlich wird ein Textschatten hinzugefügt.