I added a group hover to an element but also a hover to that element. The group-hover works, but when I hover over the element itself the background color doesn't change.
bg-green-500 group-hover:bg-green-200 hover:bg-green-500
Tailwindcss use hover over group-hover
Viewed 2886
2 Answers
This is now possible with Tailwind Just-in-Time mode, using the built-in important modifier:
<div className="group">
<div className="opacity-0 group-hover:opacity-50 hover:!opacity-100">
Note the magic of the exclamation point!
</div>
</div>
u need to add 'group' class to your parent element like this:
<div class="group">
<div class="bg-green-500 group-hover:bg-green-200 hover:bg-green-500">
<div class="hover:bg-green-500">
CONTENT 1
</div>
<div>
CONTENT 2
</div>
</div>
</div>
it change background to green-200 when you hover group element and its children like Content 2 above, and also change background to green-500 when you hover the content 1
hope it works :)
Related