Группы и группировка состояний

Учим дочерний элемент реагировать на наведение не на себя, а на весь родительский блок.

group помечает родителя, а вариант group-hover: на ребёнке срабатывает при наведении на этого родителя.

Зачем это нужно

Обычный hover: реагирует на наведение именно на тот элемент, где он написан. Но часто хочется, чтобы при наведении на всю карточку менялся какой-то вложенный элемент — например, появлялась кнопка или подсвечивался заголовок. Сам по себе hover: так не умеет: ему важно навести курсор на конкретный элемент.

Как работает group

Решение из двух шагов: на родителя вешаем класс-маркер group, а на потомке используем group-hover::

<div class="group p-4 border rounded hover:shadow-lg">
  <h3 class="group-hover:text-blue-600">Заголовок карточки</h3>
  <p>Описание</p>
</div>

Наводим курсор куда угодно внутри карточки — у всей карточки усиливается тень (это обычный hover: на родителе), а заголовок одновременно синеет (group-hover: на ребёнке). Хотя курсор может быть над описанием, реагирует именно заголовок, потому что отслеживается наведение на группу-родителя.

Появление по наведению

Частый приём — прятать действие и показывать его при наведении на карточку. Кнопка «Удалить» появляется только когда курсор над строкой списка:

<li class="group flex justify-between p-2">
  <span>Элемент списка</span>
  <button class="opacity-0 group-hover:opacity-100">Удалить</button>
</li>

В покое кнопка невидима (opacity-0); как только курсор заходит на строку, она проявляется (group-hover:opacity-100). Интерфейс остаётся чистым, а действия — под рукой.

Другие состояния группы

Аналогично работают group-focus: и другие — например, подсветить иконку, когда сфокусировано поле внутри группы. Принцип один: пометили родителя как group, а на детях используете group-СОСТОЯНИЕ:.

Итог

Обычный hover: реагирует только на сам элемент; group позволяет реагировать на родителя.
Схема: group на родителе + group-hover: на потомке.
Типичные применения — подсветка вложенного текста и появление скрытых действий при наведении на карточку.