apply hover simultaneously to different part of text with css

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 in HTML, divided into words. Each word is linked to
a CSS class; two different words can be linked to the same class.
By example, if I take three words and two classes (classA, classB),
word1, word3 -> classA
word2 -> classB
I will write the following HTML code :
<span class=classA>word1</span>
<span class=classB>word2</span>
<span class=classA>word3</span>
My problem : I want to change the appearance of a group of words sharing
the same class on mouse over.
I tried :
.classA {
color: red;
}
.classA:hover {
color: blue;
}
... but when the mouse goes over "word1", "word1" is highlighted, but not
"word3" which shares the same class ("classA").
Any help would be appreciated !