Наведение

На хорошем сайте кнопки, ссылки и поля форм реагируют на ваши действия: кнопка темнеет, когда на неё наводят указатель мыши, а поле показывает, что вы вводите в него текст. В этом уроке вы научитесь оформлять такие состояния с помощью Tailwind.

Для урока мы подготовили те части сайта приюта, с которыми взаимодействуют посетители: карточку Тигра с кнопкой «Забрать Тигра» и раздел «Контакты» с часами работы. Они оформлены классами из предыдущих уроков, включая раскладку, но пока ни на что не реагируют. Позже в уроке мы добавим форму обратной связи и ещё одну карточку.

В курсе CSS вы меняли вид элемента под указателем мыши с помощью псевдокласса :hover:

button:hover {
	background-color: darkorange;
}

В Tailwind состояние пишут перед классом и отделяют от него двоеточием:

<button class="bg-orange-500 hover:bg-orange-600">Забрать Тигра</button>

Префикс hover: называется вариантом (variant). Класс с вариантом действует только в своём состоянии, а всё остальное время ничего не делает. Поэтому у кнопки остаются оба класса: bg-orange-500 — её обычный фон, а hover:bg-orange-600 — более тёмный фон на тот момент, когда над кнопкой находится указатель мыши: Забрать Тигра → Забрать Тигра. Вариант можно поставить перед почти любым классом: hover:text-white, hover:underline, hover:shadow-lg и так далее.

Tailwind превращает такой класс в правило с :hover, точно как те, что вы писали сами. В селекторе двоеточие из имени класса записывается как \:, потому что обычное двоеточие началось бы как псевдокласс:

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

Есть одно отличие от вашего собственного CSS. У телефонов и планшетов нет указателя мыши, и когда вы нажимаете там на кнопку, некоторые браузеры оставляют её вид :hover «залипшим». Поэтому Tailwind применяет классы hover: только на устройствах, которые умеют наводить указатель, например на компьютере с мышью. (Он помещает правило внутрь @media (hover: hover); об @media вы узнаете в следующем уроке, об адаптивном дизайне.) И, как вы знаете из курса CSS, ничего важного не должно быть видно только при наведении.