Изменить цвет фона родительского контейнера при наведении дочернего элемента (только CSS)

Хотя вопрос о выборе родительских элементов с помощью CSS часто помечается как дубликат, он упускает из виду необходимость практических решений. В частности, проблему изменения цвета фона родительского контейнера при наведении курсора на его дочерний элемент можно решить с помощью подхода, основанного только на CSS.

Pointer-Events и Hover:

Чтобы добиться этого эффекта, мы можем манипулировать событиями указателя и псевдоклассом :hover:

1. Set pointer-events: none для родительского элемента. Это предотвращает получение родительским элементом каких-либо событий наведения.
2. Определите желаемое изменение цвета родительского фона при наведении.
3. Установить события указателя: auto для дочернего элемента. Это позволяет дочернему элементу запускать события наведения, даже если родительский элемент игнорирует их.

Пример:

div {
  height: 200px;
  width: 200px;
  text-align: center;
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}

  Anchor Text

Это решение эффективно фиксирует событие наведения на дочерний элемент, позволяя изменить фон родительского контейнера при наведении на дочерний элемент, и все это без использования JavaScript.