Example code:
<div id="container-1">
<div class="element-1"></div>
<div class="element-2"></div>
...
</div>
<div id="container-2">
<div class="element-3"></div>
<div class="element-4"></div>
...
</div>
I'm trying to apply a hover effect to an element located inside the second container when I hover over an element from the first container. Both elements have to be in different containers.
The closest thing I managed to achieve is:
#container-1:hover ~ #container-2 .element-3
This selector allows me to apply a hover effect to .element-3 when I hover over the first container, however I would like to make it work only when I hover over one of the elements inside the container, not the entire container itself.
Basically, something similar to the following: (which sadly doesn't seem to work)
#container-1 .element-1:hover ~ #container-2 .element-3
Is there any way I could accomplish this using only pure css?
