Hovering Over a Card

On many websites, a whole card reacts to the mouse pointer, not only its button. Let's make the cat's name turn orange when you point anywhere on its card: at the picture, the text or the button.

The class hover:text-orange-600 on the name wouldn't do: it would apply only when the pointer is over the name itself. We need to style the name by the state of its ancestor, the card. Tailwind has two classes for that:

• group on the ancestor marks it as a group. It doesn't change anything on its own: Tailwind makes no CSS for it.
• group-hover: on an element inside the group applies a class when the pointer is anywhere over the group.

<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, this is a descendant selector (two selectors separated by a space), which you know from the CSS course. Simplified, Tailwind makes this rule:

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

Other states work the same way, for example group-focus: or group-active:.

The card itself can react with a plain hover:. A bigger shadow makes it look as if it were rising toward you: hover:shadow-xl. For the shadow to grow smoothly, the card needs a transition too. transition-colors covers only colors, so use transition-shadow, which covers the shadow (or transition, which covers both).