title: Hovering one item should activate all item with the same class
body: <p>I've got a class - let's call it <code>.purple</code> and I got several items with this class</p>
  
  <pre><code>&lt;img src="..." class="switch_purple"&gt;
  
  &lt;p class="purple"&gt; Purple&lt;/p&gt;
  &lt;p class="purple"&gt; Purple&lt;/p&gt;
  &lt;p class="green"&gt; Green&lt;/p&gt;
  &lt;p class="purple"&gt; Purple&lt;/p&gt;
  &lt;p class="green"&gt; Green&lt;/p&gt;
  &lt;p class="purple"&gt; Purple&lt;/p&gt;
  </code></pre>
  
  <p>What I want to do is, <strong>without using Javascript</strong>:</p>
  
  <ul>
  <li><p>Hovering an item with <code>.purple</code> class will hover all of the same class</p></li>
  <li><p>Hovering the image with <code>.switch_purple</code> will hover all of the <code>.purple</code> class</p></li>
  </ul>
  
  <hr>
  
  <p>[Update] First way worked: </p>
  
  <pre><code>.purple:hover ~ .purple, .purple:hover {...}
  </code></pre>
  
  <p>Problem: Only takes effect to all next items.</p>