Как поменять свойство одного ребенка через другого?

Question

[Hidden Fronter]

Как поменять цвет текста h2 при наведении курсора мыши на img?

HTML

<div>
 <h2>GG</h2>
 <img src="test.png">
</div>

CSS

div img:hover div h2{
 color: red;
}

С кодом выше не работает.

Answer 1

[szQocks]

<div>
 <img src="test.png">
 <h2>GG</h2>
</div>

div{
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

img:hover + h2 {
  color: red;
}

Answer 2

[Lynn «Кофеман»]

https://developer.mozilla.org/ru/docs/Web/CSS/:has

Что-то такое, но убедитесь что вас устраивает уровень поддержки в браузерах

div:has(img:hover) h2 {
 color: red;
}

Comments

[Hidden Fronter]

не работает.

[Антон Горецкий]

Hidden Fronter, тогда только через JS:

<style>
.hovered-h2 {
  color: blue; /* Пример изменения цвета на синий */
}
</style>

<div>
    <h2 id="textElement">GG</h2>
    <img id="imageElement" src="test.png">
</div>

<script>
// JavaScript для изменения цвета
document.getElementById('imageElement').addEventListener('mouseover', () => {
    document.getElementById('textElement').classList.add('hovered-h2');
});

document.getElementById('imageElement').addEventListener('mouseout', () => {
    document.getElementById('textElement').classList.remove('hovered-h2');
});
</script>

[szQocks]

Hidden Fronter, он же написал

убедитесь что вас устраивает уровень поддержки в браузерах

ещё как вариант

<div>
 <img src="test.png">
 <h2>GG</h2>
</div>

div{
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

img:hover + h2 {
  color: red;
}

[Сергей delphinpro]

Hidden Fronter, работает. у вас либо файрфокс не обновлялся с декабря 2023, либо другой очень старый браузер.

[Hidden Fronter]

Сергей delphinpro, у меня Edge 124, win 10.

[Сергей delphinpro]

Hidden Fronter, и вы хотите сказать, что это у вас не работает?

[Виктор Кожухарь]

szQocks, Почему-то вспомнились хаки из нулевых. Всплакнул от ностальгии)

[Hidden Fronter]

szQocks, Выставляйте свой комментарий как ответ. Это решение.

[Hidden Fronter]

Сергей delphinpro, ваш пример работает, видимо что-то в верстке моей реальной страницы не дает сработать. Выставляйте как ответ. Тоже решение.

[Сергей delphinpro]

Hidden Fronter, такой ответ уже есть