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.
Top comments (8)
awesome content, thanks so much for sharing
Thanks bro** :D**
Thanks!
I have found what I was looking for.
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
Great job
very useful