Apply Hover Simultaneously To Different Part Of Text With Css

I'm looking for a (CSS-)way to apply the hover state to a part of my HTML text when another part is hovered over, the two parts sharing the same CSS class. I have a bunch of text i

Solution 1:

The short answer is NO, you cannot do that with CSS only except if you go for the solutions I've shared with you below.

Use the adjacent selector to apply the :hover effect at the same time

.classA:hover + .classB + .classA {
    color: blue;
}

Demo

But unfortunately this will only work if you :hover the first group element, as you cannot go back with CSS, the second way to do is use a wrapper element but again, this will be limited if you are having only 2 combination of classes where you want to apply styles to a single type of class.

.wrapper_class:hover.classA {
   color: blue;
}

Demo 2