title: how to hightlight divs that not being hovered on hover
body: <p>when i hover over a div, the background color changes to green but also when i hover i want the others divs to change to yellow</p>
  
  <p>how i can make that with this html structure?</p>
  
  <p>heres a <a href="https://codepen.io/IgorEstevaoo/pen/ZEbwLaO" rel="nofollow noreferrer">sample</a>:</p>
  
  <pre><code>&lt;div class="box"&gt;1&lt;/div&gt;
  &lt;div class="box"&gt;2&lt;/div&gt;
  &lt;div class="box"&gt;3&lt;/div&gt;
  &lt;div class="box"&gt;4&lt;/div&gt;
  
  
      .box{
        background-color:yellow;
        width: 100px;
        height: 100px;
        border:black solid 1px;
        margin: auto;
        display:flex;
        justify-content:center;
        align-items:center;
        transition: all 300ms;
        &amp;:hover{
          background-color:green;
        }
      }
  </code></pre>
  
  <p>i want this when i hover:</p>
  
  <p><a href="https://i.stack.imgur.com/7BwxF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7BwxF.png" alt="enter image description here"></a></p>