Tailwind CSS
/Advanced
group-hover
Definition
A complex state variant that allows a CHILD element to change its styling when a PARENT element is hovered.
Explain Like I'm New
Normally, `hover:text-red` only triggers if your mouse is directly touching that exact word. But what if you have a massive Card, and you want a tiny arrow inside the card to turn red when the user hovers over ANY part of the Card? You make the Card a `group`, and you give the arrow `group-hover:text-red`.
Real World Example
A pricing tier card. When the user hovers over the card itself, the 'Buy Now' button inside it instantly lights up and expands.
Common Use Cases
- •Interactive Cards
- •List items with action buttons
- •Complex UI feedback
Interactive Example
Interview Questions
basic
- What class MUST you place on the parent element for `group-hover:` to work on the child?
intermediate
- Can you have nested groups (a group inside another group)?