Search code examples
csslaraveluser-interfacetailwind-css

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

I made this style for side bar navigation

enter image description here

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

On hover, active etc

  • 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.

Solution

  • Use group-hover state

    1. Add group class to your parent element (anchor-tag in your case)
    2. Replace hover: with group-hover:

    Worth to mention not every property supports group-hover, so there can be situation, where you may need to extend core plugins. More info about group-hover here

    DEMO https://play.tailwindcss.com/dzacJTR76X