When I came across this thing where every other element was behaving differently when we hover, I didn't even know what do we call it and how to search it, after trying several keywords, I finally got the idea of what's happening and tried to write the css from scratch, it became tedious for me to maintain the color, background-color, border-color and many more styles for every single child element.
Got Group-hover from tailwindcss and used it effortlessly.
Put group in the parent element and group-hover: in all those child elements where we want the style on hover, everything else will be taken care of.
The code will look something like this:-
<div className=' flex h-screen justify-center items-center'>
<div className='group text-xl'>
<strong className='group-hover:text-red-500'>Hover on me </strong>
<strong className='group-hover:text-green-500'>the texts will be </strong>
<strong className='group-hover:text-blue-500'>of different colors</strong>
</div>
</div>
No configuration is required in the tailwind.config.js file unless one is trying to apply group-hover on some plugin that needs to be enabled in the variants of the config file.
Oldest comments (6)
awesome content, thanks so much for sharing
Great job
Thank you so much.
I always forget this one! I forget the details, but knowing it exists has proven to be useful again and again. Great feature. Thanks
very useful
I have found what I was looking for.