Pseudoklassen: Eine Seite mit einem Gedicht

Gedicht

Betrachten Sie für die folgende Aufgabe dieses Archiv: Vorlage_Gedicht.zip. Entzippen Sie es in Ihr Arbeitsverzeichnis.

Die Webseite enthält unter anderem einen Container (div-Element) mit einem Gedicht. Das Gedicht erstreckt sich über zwei Textabsätze. Um allerdings die Zeilenumbrüche, die für ein Gedicht relevant sind, beizubehalten, wird hier das Element pre statt dem üblichen Element p benutzt (Abbildung).

Ergänzen Sie die CSS-Datei (und bei Bedarf auch die HTML-Datei) so, dass das folgende Verhalten Umgesetzt wird:

Der erste Absatz (pre-Element) wird rot eingefärbt, sobald die Maus über diesen bewegt wird.

Gedicht mit Hover — Gedicht mit Maus über den ersten Absatz.

Während in den ersten Absatz geklickt wird werden alle em-Elemente in diesem Absatz blau eingefärbt.

Gleichzeitig wird beim Klick auf den Container (div-Element) jeweils das erste em-Element in beiden Absätzen grün eingefärbt (Wort "Hamburg" und "Verzicht").

Hinweis: Wenn die Reaktion auf eine Mausbewegung, z.B. hover, sich auf ein Kind eines Elementes auswirken soll, muss ein Hierarchieselektor benutzt werden. Beispiel: Beim Klick auf ein div-Element, soll der darin enthaltene Absatz eine rote Schriftfarbe bekommen:

HTML:

<div>
	<p> ... </p>
</div>

CSS:

div:active p {
	color: red;
}