Hover

Auf einer guten Website reagieren Buttons, Links und Formularfelder auf das, was du tust: Ein Button wird dunkler, wenn du mit der Maus darauf zeigst, und ein Feld zeigt, dass du gerade hineinschreibst. In dieser Lektion lernst du, diese Zustände mit Tailwind zu gestalten.

Für diese Lektion haben wir die Teile der Website des Tierheims vorbereitet, mit denen Besucher interagieren: Tigers Karte mit dem Button „Tiger adoptieren“ und den Bereich Kontakt mit den Öffnungszeiten. Sie sind mit Klassen aus den vorigen Lektionen gestaltet, das Layout eingeschlossen, reagieren aber noch auf nichts. Später in der Lektion fügen wir ein Kontaktformular und eine weitere Karte hinzu.

Im CSS-Kurs hast du das Aussehen eines Elements unter dem Mauszeiger mit der Pseudoklasse :hover verändert:

button:hover {
	background-color: darkorange;
}

In Tailwind schreibst du den Zustand vor eine Klasse und trennst beide mit einem Doppelpunkt:

<button class="bg-orange-500 hover:bg-orange-600">Tiger adoptieren</button>

Das Präfix hover: heißt Variante. Eine Klasse mit einer Variante gilt nur in ihrem Zustand; sonst bewirkt sie nichts. Darum behält der Button beide Klassen: bg-orange-500 ist sein gewöhnlicher Hintergrund und hover:bg-orange-600 ein dunklerer für den Moment, in dem der Mauszeiger darüber steht: Tiger adoptieren → Tiger adoptieren. Eine Variante kann vor fast jeder Klasse stehen: hover:text-white, hover:underline, hover:shadow-lg und so weiter.

Tailwind macht aus der Klasse eine Regel mit :hover, genau wie die, die du selbst geschrieben hast. Im Selektor wird der Doppelpunkt aus dem Klassennamen als \: geschrieben, denn ein einfacher Doppelpunkt würde eine Pseudoklasse einleiten:

.hover\:bg-orange-600:hover {
	background-color: oklch(64.6% 0.222 41.116); /* orange-600 */
}

Einen Unterschied zu deinem eigenen CSS gibt es. Smartphones und Tablets haben keinen Mauszeiger, und wenn du dort auf einen Button tippst, lassen manche Browser sein :hover-Aussehen an ihm hängen. Darum wendet Tailwind hover:-Klassen nur auf Geräten an, die hovern können, zum Beispiel einem Computer mit Maus. (Es setzt die Regel in @media (hover: hover); @media lernst du in der nächsten Lektion über responsives Design kennen.) Und wie du aus dem CSS-Kurs weißt, sollte nichts Wichtiges nur beim Hovern sichtbar sein.