title: How to apply Hover-effects to other elements with the same css class?
body: <p>I have this code snippet here</p>
  <pre><code>&lt;div class=&quot;container-01&quot;&gt;container-01
    &lt;ul class=&quot;container-01-ul&quot;&gt;
      &lt;li class=&quot;list-item-01&quot;&gt;list-item-01&lt;/li&gt;
      &lt;li class=&quot;list-item-02&quot;&gt;list-item-02&lt;/li&gt;
      &lt;li class=&quot;list-item-03&quot;&gt;list-item-03&lt;/li&gt;
      &lt;li class=&quot;list-item-04&quot;&gt;list-item-04&lt;/li&gt;
      &lt;li class=&quot;list-item-05&quot;&gt;list-item-05&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class=&quot;container-02&quot;&gt;container-02
    &lt;ul class=&quot;container-02-ul&quot;&gt;
      &lt;li class=&quot;list-item-01&quot;&gt;list-item-01&lt;/li&gt;
      &lt;li class=&quot;list-item-02&quot;&gt;list-item-02&lt;/li&gt;
      &lt;li class=&quot;list-item-03&quot;&gt;list-item-03&lt;/li&gt;
      &lt;li class=&quot;list-item-04&quot;&gt;list-item-04&lt;/li&gt;
      &lt;li class=&quot;list-item-05&quot;&gt;list-item-05&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>For example if I hover on <code>list-item-01</code> in <code>container-01</code> the other <code>list-item-01</code> in <code>container-02</code> should also have the same effect?
  Like I want to change the background-color when hovering on one of the list-item but it should also change the background-color of the other one.</p>
  <p>Is it possible with plain CSS?</p>
  <p>If not, how can I achieve this in JavaScript or jQuery?</p>
  <p>I tried with this one which works but is there any better solutions??</p>
  <pre><code>&lt;head&gt;
  &lt;script&gt;
    function changeColor(x) {
      document.querySelectorAll(&quot;.&quot; + x).forEach(el =&gt; el.style.backgroundColor = 'red');
    }
  
    function normal(x) {
      document.querySelectorAll(&quot;.&quot; + x).forEach(el =&gt; el.style.backgroundColor = 'transparent');
    }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class=&quot;container-01&quot;&gt;container-01
    &lt;ul class=&quot;container-01-ul&quot;&gt;
      &lt;li class=&quot;list-item-01&quot; onmouseover=&quot;changeColor(this.className)&quot; onmouseout=&quot;normal(this.className)&quot;&gt;list-item-01&lt;/li&gt;
      &lt;li class=&quot;list-item-02&quot; onmouseover=&quot;changeColor(this.className)&quot; onmouseout=&quot;normal(this.className)&quot;&gt;list-item-02&lt;/li&gt;
      &lt;li class=&quot;list-item-03&quot; onmouseover=&quot;changeColor(this.className)&quot; onmouseout=&quot;normal(this.className)&quot;&gt;list-item-03&lt;/li&gt;
      &lt;li class=&quot;list-item-04&quot; onmouseover=&quot;changeColor(this.className)&quot; onmouseout=&quot;normal(this.className)&quot;&gt;list-item-04&lt;/li&gt;
      &lt;li class=&quot;list-item-05&quot; onmouseover=&quot;changeColor(this.className)&quot; onmouseout=&quot;normal(this.className)&quot;&gt;list-item-05&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class=&quot;container-02&quot;&gt;container-02
    &lt;ul class=&quot;container-02-ul&quot;&gt;
      &lt;li class=&quot;list-item-01&quot; onmouseover=&quot;changeColor(this.className)&quot; onmouseout=&quot;normal(this.className)&quot;&gt;list-item-01&lt;/li&gt;
      &lt;li class=&quot;list-item-02&quot; onmouseover=&quot;changeColor(this.className)&quot; onmouseout=&quot;normal(this.className)&quot;&gt;list-item-02&lt;/li&gt;
      &lt;li class=&quot;list-item-03&quot; onmouseover=&quot;changeColor(this.className)&quot; onmouseout=&quot;normal(this.className)&quot;&gt;list-item-03&lt;/li&gt;
      &lt;li class=&quot;list-item-04&quot; onmouseover=&quot;changeColor(this.className)&quot; onmouseout=&quot;normal(this.className)&quot; &gt;list-item-04&lt;/li&gt;
      &lt;li class=&quot;list-item-05&quot; onmouseover=&quot;changeColor(this.className)&quot; onmouseout=&quot;normal(this.className)&quot;&gt;list-item-05&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>