Hovering effect doesn't work with tag

Question

i don't why the following code doesn't work with images but it does with other tags

// HTML

<img src="https://via.placeholder.com/80x80" alt="image">
<div>lorem ipsum</div>

// CSS

img:hover div {
  color: red;
}

Anyone can explain why it's not working and how i can fix it

Thanks

Answer 1

Use +

It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.

Learn here:https://techbrij.com/css-selector-adjacent-child-sibling

img:hover+div {
  color: red;
}

<img src="https://via.placeholder.com/80x80" alt="image">
<div>lorem ipsum</div>