Pseudoklassen: Boxengrößen

Basislayout

Implementieren Sie die HTML- und CSS-Dateien so, dass zwei quadratische Boxen nebeneinander stehen, mit unterschiedlichen Texten, Hintergrundfarben und Umrandungen.

Basislayout mit zwei Boxen
Basislayout mit zwei Boxen
Pseudoklassen

Wenn der Benutzer mit der Maus über den Bereich mit den Boxen fährt, ändern sich die Größe und die Farben der beiden Boxen:

  • Die erste Box wird größer und orange.
  • Die zweite Box wird kleiner und lila.

Zudem fliessen die Boxen stärker auseinander (nach links und rechts). Die Schrift ändert ihre Größe nicht - die Anzeige im Screenshot ist skaliert.

Layout mit Hover-Effekt
Layout mit Hover-Effekt