title: How to make parent div activate styling of child div for hover and active
body: <p>I made this style for side bar navigation</p>
  <p><a href="https://i.stack.imgur.com/YqBhX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YqBhX.png" alt="enter image description here" /></a></p>
  <p>I made a box and used transform to hide it on the left side, to get the curved border effect.</p>
  <p>On hover, active ect</p>
  <ul>
  <li>Border button -&gt; bg-green-300</li>
  <li>text-green-300 for icon and text</li>
  <li>font-semibold for text only</li>
  </ul>
  <pre><code>&lt;a href=&quot;/dashboard&quot;&gt;
      &lt;div class=&quot;flex flex-row space-x-8 w-72 text-lg pb-3 text-gray-200&quot;&gt; 
          
          &lt;div class=&quot;h-8 w-8 rounded transform -translate-x-7 hover:bg-green-300&quot;&gt;&lt;/div&gt;
  
          &lt;div class=&quot;flex flex-row items-center space-x-8 transform -translate-x-10 -translate-y-1&quot;&gt;
              &lt;i class=&quot;bi bi-columns-gap hover:text-green-300 transform translate-x-1&quot;&gt;&lt;/i&gt;
              &lt;h2 class=&quot;hover:font-semibold hover:text-green-300 transform translate-y-1 text-base&quot;&gt;Dashboard&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/a&gt;
  
  </code></pre>
  <p>Is there something I can add to the main div to activate the hover effect in each child element at same time?</p>
  <p>Right now it works only when I hover over each individual element.</p>
  <p>Any help is much appreciated :)</p>