Смена цвета вложенного div при наведении на родителя в CSS

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

Для того, чтобы изменить стиль других элементов при наведении курсора, используйте CSS с псевдоклассом :hover внутри контейнера целевого дочернего элемента. Вот пример кода:

#container:hover #child {
  color: red; /* Красный цвет обычно ассоциируется с энергией и страстью. */
}

В данном случае при наведении на #container текст в дочернем элементе с идентификатором #child будет окрашен в красный цвет. Для этого JavaScript не требуется.

CSS селекторы отношений при наведении

Вы можете скомбинировать псевдокласс :hover с селекторами отношений, такими как дочерний (>), соседний (+) или любой соседний (~), чтобы выборочно изменять стиль конкретных элементов.

Примеры их использования:

#container:hover > #child-direct { // Стиль дочернего элемента при наведении на его родителя
  border: 2px solid blue;
}

#container:hover + #sibling-next { // Непосредственный сосед контейнера
  font-weight: bold;
}

#container:hover ~ #any-sibling { // Любой соседний элемент
  opacity: 0.75;
}

Эти селекторы применимы к дочернему элементу, непосредственно следующему соседу и всем последующим соседям соответственно при наведении на #container.

Использование CSS комбинаторов для более сложных эффектов

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

.container {
  display: flex;
  flex-direction: row-reverse; // Элементы в контейнере располагаются в обратном порядке
}

.container-item:hover ~ .container-item {
  background-color: salmon; // Изменение фона всех элементов, расположенных перед текущим 
}

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

Стилизация родительских элементов с помощью CSS :has()

Псевдокласс :has() в CSS позволяет вносить изменения в стиль родительских элементов в зависимости от состояния дочерних. Он расширяет возможности прямых селекторов отношений:

div:has(>#hover-child:hover) {
  background-color: lemonchiffon; // Изменение фона корневого блока при наведении на его дочерний элемент
}

Здесь фон блока div, содержащего дочерний элемент под курсором, будет изменён, даже если на сам div наведение не происходило.

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

Допустим, переводя курсор мыши на лампочку (💡), находящуюся в комнате с различными предметами:

До наведения: [🛋️, 💡, 🖼️, 🪑]

Когда курсор находится на лампочке 💡, свет охватывает все предметы, находящиеся под ней:

При наведении: [🛋️🌟, 💡💫, 🖼️🌟, 🪑🌟]

Отсюда следует важный вывод: наведение на один элемент может влиять на связанные с ним элементы.

Переходы, трансформации и анимации при наведении

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

.sibling:hover {
  transform: scale(1.5); // Увеличение размера элемента
  transition: all 0.3s ease; // Плавный переход
}

Здесь при наведении на элемент, он увеличивается в размере и с более плавной анимацией.

Учет кросс-браузерной совместимости

Чтобы гарантировать корректное отображение эффектов наведения в CSS во всех популярных браузерах, включая Chrome, Firefox и Edge, учитывайте их совместимость. Это особенно важно при использовании новых возможностей, таких как :has().

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

1. CSS :hover Selector — Глубже познакомьтесь с псевдоклассом :hover по материалам W3Schools.
2. CSS element+element Selector — Всё, что нужно знать о соседних селекторах в CSS.
3. General sibling | CSS-Tricks — Обширное руководство по общему селектору сиблинга от CSS-Tricks.
4. :hover – CSS: Cascading Style Sheets | MDN — Глубокое погружение в :hover от Mozilla.
5. Using CSS transitions – CSS: Cascading Style Sheets | MDN — Исчерпывающий материал о CSS переходах.
6. CSS Diner – Where we feast on CSS Selectors! — Игра CSS Diner для интерактивного освоения селекторов .
7. A Complete Guide to Flexbox | CSS-Tricks — Обстоятельное руководство по Flexbox от CSS-Tricks.