Najetí myší (hover)

Na dobrém webu reagují tlačítka, odkazy i formulářová pole na to, co děláte: tlačítko ztmavne, když na něj najedete myší, a pole ukáže, že do něj právě píšete. V této lekci se naučíte tyto stavy stylovat pomocí Tailwindu.

Pro tuto lekci jsme připravili části webu útulku, se kterými návštěvníci pracují: kartu Mourka s tlačítkem „Adoptovat Mourka“ a sekci Kontakt s otevírací dobou. Jsou nastylované třídami z předchozích lekcí, včetně rozložení, ale zatím na nic nereagují. Později v lekci přidáme kontaktní formulář a další kartu.

V kurzu CSS jste vzhled prvku pod ukazatelem myši měnili pseudotřídou :hover:

button:hover {
	background-color: darkorange;
}

V Tailwindu napíšete stav před třídu a oddělíte je dvojtečkou:

<button class="bg-orange-500 hover:bg-orange-600">Adoptovat Mourka</button>

Předponě hover: se říká varianta. Třída s variantou platí jen ve svém stavu, jindy nedělá nic. Proto má tlačítko obě třídy: bg-orange-500 je jeho obvyklé pozadí a hover:bg-orange-600 tmavší pozadí pro chvíli, kdy je nad ním ukazatel myši: Adoptovat Mourka → Adoptovat Mourka. Variantu můžete napsat před téměř libovolnou třídu: hover:text-white, hover:underline, hover:shadow-lg a tak dále.

Tailwind z takové třídy udělá stejné pravidlo s :hover, jaké jste psali sami. Dvojtečka z názvu třídy se v selektoru píše jako \:, protože obyčejná dvojtečka by začínala pseudotřídu:

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

Jeden rozdíl oproti vašemu vlastnímu CSS tu ale je. Telefony a tablety nemají ukazatel myši, a když na nich na tlačítko klepnete, některé prohlížeče na něm vzhled z :hover nechají viset. Tailwind proto třídy s hover: používá jen na zařízeních, která najetí myší umí, třeba na počítači s myší. (Vloží pravidlo do @media (hover: hover); s @media se seznámíte v příští lekci, o responzivním designu.) A jak už víte z kurzu CSS, nic důležitého by nemělo být vidět jen při najetí myší.