How to make parent div activate styling of child div for hover and active

I made this style for side bar navigation

I made a box and used transform to hide it on the left side, to get the curved border effect.

On hover, active ect

• Border button -> bg-green-300
• text-green-300 for icon and text
• font-semibold for text only

<a href="/dashboard">
    <div class="flex flex-row space-x-8 w-72 text-lg pb-3 text-gray-200"> 
        
        <div class="h-8 w-8 rounded transform -translate-x-7 hover:bg-green-300"></div>

        <div class="flex flex-row items-center space-x-8 transform -translate-x-10 -translate-y-1">
            <i class="bi bi-columns-gap hover:text-green-300 transform translate-x-1"></i>
            <h2 class="hover:font-semibold hover:text-green-300 transform translate-y-1 text-base">Dashboard</h2>
        </div>
    </div>
</a>

Is there something I can add to the main div to activate the hover effect in each child element at same time?

Right now it works only when I hover over each individual element.

Any help is much appreciated :)