Najetí myší na kartu

Na mnoha webech reaguje na ukazatel myši celá karta, ne jen její tlačítko. Zařídíme, aby jméno kočky zoranžovělo, když najedete kamkoli na její kartu: na obrázek, na text i na tlačítko.

Třída hover:text-orange-600 u jména by to nezvládla: platila by, jen když je ukazatel přímo nad jménem. Potřebujeme jméno stylovat podle stavu jeho předka, karty. Tailwind na to má dvě třídy:

• group (anglicky skupina) označí předka jako skupinu. Sama nic nezmění: Tailwind pro ni žádné CSS nevytvoří.
• group-hover: u prvku uvnitř skupiny použije třídu, když je ukazatel myši kdekoli nad skupinou.

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

V CSS je to výběr potomků (dva selektory oddělené mezerou), který znáte z kurzu CSS. Zjednodušeně Tailwind vytvoří toto pravidlo:

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

Stejně fungují i další stavy, například group-focus: nebo group-active:.

Samotná karta může reagovat obyčejnou variantou hover:. Při větším stínu to vypadá, jako by se karta zvedla směrem k vám: hover:shadow-xl. Aby stín rostl plynule, potřebuje přechod i karta. transition-colors se týká jen barev, proto použijte transition-shadow, která se týká stínu (nebo transition, která zvládne obojí).