Group-hover (parent triggers child) in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does group-hover do in Tailwind CSS?

group-hover lets a parent element control the hover styles of its child elements. When you hover over the parent, the child changes style.

beginner

How do you enable group-hover on a child element?

<p>Add the <code>group</code> class to the parent and use <code>group-hover:</code> prefix on the child's class you want to change on hover.</p>

beginner

Why do you need the <code>group</code> class on the parent?

<p>The <code>group</code> class marks the parent so Tailwind knows to watch it for hover events and apply styles to children with <code>group-hover:</code>.</p>

intermediate

Can group-hover be used for keyboard focus states?

No, group-hover only works for mouse hover. For keyboard focus, use group-focus instead.

beginner

Example: What happens with this code?<br>

<div class="group">
  <p class="group-hover:text-red-500">Hello</p>
</div>

When you hover over the <div>, the <p> text color changes to red because of group-hover:text-red-500.

What class must be added to the parent element to use group-hover on children?

A child-hover

B hover

C parent-hover

D group

The group class on the parent enables group-hover styles on children.

Which of these is a correct way to change a child's background on parent hover?

A &lt;div&gt;&lt;span class="hover:group-bg-blue-500"&gt;Text&lt;/span&gt;&lt;/div&gt;

B &lt;div class="group"&gt;&lt;span class="group-hover:bg-blue-500"&gt;Text&lt;/span&gt;&lt;/div&gt;

C &lt;div class="group-hover"&gt;&lt;span class="bg-blue-500"&gt;Text&lt;/span&gt;&lt;/div&gt;

D &lt;div class="hover-group"&gt;&lt;span class="bg-blue-500"&gt;Text&lt;/span&gt;&lt;/div&gt;

Only option C uses group on parent and group-hover: on child correctly.

Does group-hover respond to keyboard focus by default?

A No, it only works on mouse hover

B Yes, it works with keyboard focus

C Yes, but only on buttons

D No, it works on click only

group-hover only triggers on mouse hover, not keyboard focus.

What happens if you forget to add group on the parent but use group-hover on the child?

A Child styles never change on hover

B Child styles change on hover anyway

C Parent gets hover styles instead

D Browser shows an error

Without group on the parent, group-hover on child does nothing.

Which Tailwind feature allows a child to change style when the parent is hovered?

A hover-child

B parent-hover

C group-hover

D child-hover

group-hover is the correct Tailwind feature for this behavior.

Explain how to use group-hover in Tailwind CSS to change a child's style when the parent is hovered.

Think about how the parent and child classes work together.

Describe a real-life example where group-hover would improve user experience on a website.

Consider menus or cards with icons or text that highlight on hover.