ARTICLE AD BOX
Let's say I have this simplified example. These two content divs aren't the same thing because I need to style them differently. "style1" and "style2" text is hidden by default. Whenever I hover over "hover1" text, then "style1" text shows up, and whenever "hover2" is hovered, "style2" shows up. This works perfectly well for the first content div (using these selectors: .hover1:hover ~ .style1, .style1:has(~ .hover1:hover), .hover2:hover ~ .style2, .style2:has(~ .hover2:hover) ), but I cannot figure out how to make it work for the second content div. I need everything in the first content div to show up on hover in the second div, too.
I know I have to use some combination of selectors to go through #main somehow to reach style1 and style2 text in order to reveal them, but... how? How do I select style1 from hover1:hover in the second div?
Please no JavaScript answers unless it's truly necessary, I'm trying to keep this CSS-only
<div id="main"> text that the text below goes under<br> <div class="content"> <span class="hover1">reveals style1 text when hovered><br> <span class="hover2">reveals style2 text when hovered<br> <span class="style1">words words words<br> words words words</span> <span class="style2">different words<br> words words words</span> </div> <div class="content"> <span class="hover1">reveals style1 text when hovered><br> <span class="hover2">reveals style2 text when hovered<br> <span class="style1">words words words<br> words words words</span> <span class="style2">different words<br> words words words</span> </div> </div>