CODEWITHSUNDEEP
csslaraveluser-interfacetailwind-css
Jakub
Jakub

Reputation: 1700

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

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

Upvotes: 109

Views: 135767

Answers (2)

krishnaacharyaa
krishnaacharyaa

Reputation: 24920

Use group in parent and group:hover in child

Code Structure:

<div class="group">
    <div class="group-hover:... "/>
    <div class="group-hover:... "/>
</div>

Example:

<div class="group flex ">
    <div class="rounded-full bg-black w-10 h-10 group-hover:bg-cyan-400 "></div>
    <i class="text-4xl ml-4 group-hover:bg-cyan-400 cursor-pointer ">Brighten me</i>
</div>

Output:

enter image description here

OnHover:

enter image description here

Upvotes: 68

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14183

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

Upvotes: 220

Related Questions