title: apply hover simultaneously to different part of text with css
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>By example, if I take three words and two classes (classA, classB),</p>
  
  <pre><code>word1, word3 -&gt; classA
  word2 -&gt; classB
  </code></pre>
  
  <p>I will write the following HTML code :</p>
  
  <pre><code>&lt;span class=classA&gt;word1&lt;/span&gt;
  &lt;span class=classB&gt;word2&lt;/span&gt;
  &lt;span class=classA&gt;word3&lt;/span&gt;
  </code></pre>
  
  <p>My problem : I want to change the appearance of a group of words sharing the same class on mouse over.</p>
  
  <p>I tried :</p>
  
  <pre><code>.classA {
      color: red;
    }
  .classA:hover {
      color: blue;
    }
  </code></pre>
  
  <p>... but when the mouse goes over "word1", "word1" is highlighted, but not "word3" which shares the same class ("classA").</p>
  
  <p>Any help would be appreciated !</p>