Изменение стиля родителя при наведении на дочерний элемент в CSS

Быстрый ответ

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

// По мановению волшебной палочки у нашего родителя появляется класс "hovered" 
document.querySelector('.child').addEventListener('mouseenter', function() {
    this.parentElement.classList.add('hovered');
});
// ...и как волшебством класс исчезает, когда наш курсор покидает дочерний элемент.
document.querySelector('.child').addEventListener('mouseleave', function() {
    this.parentElement.classList.remove('hovered');
});

А вот так мы можем применить стилизацию к нашему родительскому элементу через CSS:

.hovered {
    /* Превращения, превращения... */
    border: 2px solid blue;
}

Так при наведении на дочерний элемент, родитель получает класс .hovered. Когда с дочернего элемента уходит фокус, класс также удаляется.

Продвинутые CSS селекторы

Хотя JavaScript отлично справляется со своей задачей, у CSS также есть несколько хитростей в арсенале. Давайте рассмотрим их подробнее:

Используем псевдокласс :has

Псевдокласс :has позволяет применить стили к родительскому элементу, основываясь на состоянии дочернего:

parent:has(> child:hover) {
    /* Невероятное преображение родителя */
    background-color: lightblue;
}

Однако стоит помнить что :has пока ещё не поддерживается всеми браузерами — например, Firefox. Не забывайте проверять совместимость.

Подробнее об этом расскажет наш спикер на видео

Используем селекторы элементов на одном уровне вложенности и абсолютное позиционирование

Соприкасаемся с благородным миром (*селекторов) одноранговых элементов, с применением абсолютного позиционирования:

.parent {
    position: relative;
}
.sibling {
    /* Мирный дозор родства */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.child:hover + .sibling {
    /* Рыцарь в блестящих доспехах */
    border: 2px dashed red;
}

Таким образом, можно использовать селектор «Следующий элемент (+)» или «Все последующие элементы (~)». Хитрая тактика противостояния семейным узам!

Используем каскадирование

CSS позволяет создавать цепи зависимостей, с образованием целого ордена разнообразных состояний:

.child:hover {
    /* Дочерний элемент в фокусе */
}

.child:hover ~ .sibling {
    /* Реагирование однорангового элемента на фокусировку элемента-потомка */
}

Хотя прямого воздействия на родительский элемент нет, мы создаем заметное взаимное влияние. Ведь важна не сила, а тактика.

Визуализация

Псевдографически представьте себе родительский элемент как мегаполис, а наведение на дочерний, как миг действия супергероя:

Вот она, карта героев (🦸) и мегаполиса (🏙️):
🏙️ Родитель
  └── 🦸 Дочерний (Набираем энергию!)

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

parent:hover {}
child:hover { parent { /* Режим мирного города: родители пока не светятся. */ } }

Запомните: Сейчас в CSS нет возможности напрямую воздействовать на родительский элемент через событие наведения дочернего. Но с применением Javascript или умело выбранных CSS-трюков можно создать впечатляющий эффект.

Полезные материалы

1. Child and Sibling Selectors от CSS-Tricks — Обстоятельное руководство по взаимоотношениям элементов в CSS.
2. MDN Web Docs – Псевдокласс :hover — Официальное руководство по использованию псевдокласса :hover.
3. W3Schools – How TO – Image Hover Overlay — Урок по созданию эффекта наведения для изображений с персонализированными примерами на HTML и CSS.