Mauszeiger über einer Karte

Auf vielen Websites reagiert eine ganze Karte auf den Mauszeiger, nicht nur ihr Button. Lass uns den Namen der Katze orange werden lassen, wenn du irgendwo auf ihre Karte zeigst: auf das Bild, den Text oder den Button.

Die Klasse hover:text-orange-600 am Namen würde nicht genügen: Sie würde nur gelten, wenn der Mauszeiger über dem Namen selbst steht. Wir müssen den Namen nach dem Zustand seines Vorfahren, der Karte, gestalten. Dafür hat Tailwind zwei Klassen:

• group am Vorfahren markiert ihn als Gruppe. Allein ändert sie nichts: Tailwind erzeugt dafür kein CSS.
• group-hover: an einem Element in der Gruppe wendet eine Klasse an, wenn der Mauszeiger irgendwo über der Gruppe steht.

<div class="rounded-2xl bg-white shadow-md group">
	<img src="/learn/tailwind/cat-orange.svg" alt="Tiger">
	<h3 class="text-xl font-bold group-hover:text-orange-600">Tiger</h3>
</div>

In CSS ist das ein Nachfahrenselektor (zwei Selektoren, durch ein Leerzeichen getrennt), den du aus dem CSS-Kurs kennst. Vereinfacht erzeugt Tailwind diese Regel:

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

Andere Zustände funktionieren genauso, zum Beispiel group-focus: oder group-active:.

Die Karte selbst kann mit einem einfachen hover: reagieren. Ein größerer Schatten lässt sie aussehen, als würde sie sich dir entgegenheben: hover:shadow-xl. Damit der Schatten sanft wächst, braucht die Karte auch eine Transition. transition-colors umfasst nur Farben, nimm also transition-shadow, das den Schatten umfasst (oder transition, das beides umfasst).