Group-hover (parent triggers child) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

How to change child text color on parent hover?

You want the text inside a child <p> to turn blue when the parent <div> is hovered. Which Tailwind class setup achieves this?

Tailwind

<div class="group">
  <p class="???">Hover me!</p>
</div>

A p class="group-hover:text-blue-500"

B p class="text-blue-500 group-hover"

C p class="hover:group-hover:text-blue-500"

D p class="group-hover-hover:text-blue-500"

💡 Hint

Remember to add group class to the parent and use group-hover: prefix on the child.

The group-hover: prefix in Tailwind applies styles to child elements when the parent with group class is hovered. Option A correctly uses group-hover:text-blue-500 on the child <p>.

❓ layout

intermediate

Which Tailwind setup makes child visible only on parent hover?

You want a child <div> to be hidden normally and appear only when the parent <section> is hovered. Which option correctly uses Tailwind classes?

Tailwind

<section class="group">
  <div class="???">I appear on hover!</div>
</section>

A hidden hover:block

B block hover:group:block

C group-hidden group-hover:block

D hidden group-hover:block

💡 Hint

Use hidden to hide by default and group-hover:block to show on parent hover.

Option D hides the child by default with hidden and shows it when the parent with group is hovered using group-hover:block. Other options misuse hover or group prefixes.

🧠 Conceptual

advanced

Why does group-hover require the parent to have group class?

In Tailwind CSS, the group-hover variant only works if the parent element has the group class. Why is this necessary?

A Because <code>group</code> changes the display property of the parent to flex.

B Because <code>group</code> adds JavaScript to detect hover on the parent.

C Because <code>group</code> sets a CSS class that enables child selectors for hover states.

D Because <code>group</code> disables pointer events on the parent.

💡 Hint

Think about how CSS selectors work with classes and hover states.

The group class adds a CSS class to the parent element. Tailwind uses this class in selectors like .group:hover > .group-hover\:text-blue-500 to style children on parent hover. No JavaScript or display changes happen.

❓ accessibility

advanced

How to keep keyboard accessibility with group-hover effects?

You use group-hover to show a tooltip on parent hover. How can you ensure keyboard users also see the tooltip when focusing the parent?

A Add <code>group-focus</code> classes on the child along with <code>group-hover</code>.

B Add <code>tabindex="-1"</code> to the child element.

C Use only <code>hover</code> classes on the child, no group classes.

D Add <code>aria-hidden="true"</code> to the tooltip.

💡 Hint

Keyboard users navigate with focus, not hover.

Adding group-focus classes on the child ensures the tooltip appears when the parent is focused via keyboard. This complements group-hover for mouse users. Other options either hide the tooltip or don't support keyboard focus.

❓ rendering

expert

What is the visual result of this Tailwind snippet?

Given this code, what color will the <span> text show when the user hovers the <article>?

Tailwind

<article class="group p-4 border">
  <h2 class="text-gray-800">Title</h2>
  <span class="text-gray-500 group-hover:text-red-600 group-focus:text-green-600">Status</span>
</article>

A The <code>span</code> text turns red on hover and stays gray on focus.

B The <code>span</code> text turns red on mouse hover and green on keyboard focus of the article.

C The <code>span</code> text stays gray on hover and focus.

D The <code>span</code> text turns green on mouse hover and red on keyboard focus of the article.

💡 Hint

Check the order and meaning of group-hover: and group-focus: classes.

The group-hover:text-red-600 changes the text color to red when the parent article is hovered by mouse. The group-focus:text-green-600 changes it to green when the parent is focused by keyboard. The default color is gray.

Practice

1. What does the group-hover utility in Tailwind CSS do?

easy

A. It applies hover styles only to sibling elements.

B. It changes the background color of the hovered element only.

C. It disables hover effects on child elements.

D. It allows a parent element to change the style of its child elements when hovered.

Solution

1. Step 1: Understand the role of group and group-hover

   The group class is added to a parent element to enable hover state tracking.

2. Step 2: Effect of group-hover on child elements

   When the parent with group is hovered, child elements with group-hover: classes change style accordingly.

3. Final Answer:

   It allows a parent element to change the style of its child elements when hovered. -> Option D

4. Quick Check:

   Group-hover = parent triggers child hover styles [OK]

Hint: Remember: parent gets 'group', child gets 'group-hover:' [OK]

Common Mistakes:

• Thinking group-hover affects siblings only
• Confusing group-hover with normal hover
• Not adding 'group' class to parent

2. Which of the following is the correct way to apply a red text color on a child element when its parent is hovered using Tailwind?

easy

A. <div class='group'><p class='hover:text-red-500'>Text</p></div>

B. <div class='group-hover'><p class='text-red-500'>Text</p></div>

C. <div class='group'><p class='group-hover:text-red-500'>Text</p></div>

D. <div><p class='group-hover:text-red-500'>Text</p></div>

Solution

1. Step 1: Add group class to the parent

   The parent must have the group class to enable group-hover functionality.

2. Step 2: Use group-hover: prefix on the child

   The child element uses group-hover:text-red-500 to change text color when parent is hovered.

3. Final Answer:

   <div class='group'><p class='group-hover:text-red-500'>Text</p></div> -> Option C

4. Quick Check:

   Parent 'group' + child 'group-hover:' = correct syntax [OK]

Hint: Parent needs 'group', child needs 'group-hover:' prefix [OK]

Common Mistakes:

• Using 'hover:' on child instead of 'group-hover:'
• Missing 'group' on parent
• Adding 'group-hover' class to parent instead of child

3. Given this code snippet, what will happen when you hover over the blue box?

<div class='group bg-blue-300 p-4'>
  <button class='group-hover:bg-red-500 text-white p-2 rounded'>Click Me</button>
</div>

medium

A. The button background changes to red when hovering over the blue box.

B. The button background changes to red only when hovering the button itself.

C. Nothing changes on hover.

D. The blue box background changes to red on hover.

Solution

1. Step 1: Identify the parent with group

   The outer div has class group, enabling group-hover effects on children.

2. Step 2: Check the child's group-hover: class

   The button has group-hover:bg-red-500, so its background changes when the parent is hovered.

3. Final Answer:

   The button background changes to red when hovering over the blue box. -> Option A

4. Quick Check:

   Parent hover triggers child's background change [OK]

Hint: Hover parent with 'group' to trigger child's 'group-hover:' styles [OK]

Common Mistakes:

• Thinking button changes only on its own hover
• Expecting parent background to change
• Missing that 'group-hover:' affects child on parent hover

4. Why does this code NOT change the child text color on parent hover?

<div class='group-hover'>
  <p class='group-hover:text-green-600'>Hello</p>
</div>

medium

A. The child should use 'hover:text-green-600' instead of 'group-hover:text-green-600'.

B. The parent is missing the 'group' class; 'group-hover' on parent is invalid.

C. The parent needs 'hover' class to trigger hover effects.

D. The child element must be a button for group-hover to work.

Solution

1. Step 1: Check the parent's class

   The parent has group-hover class, which is incorrect; it should have group.

2. Step 2: Understand group-hover usage

   group-hover: is a prefix for child classes, not a class for parents. Parent must have group to enable this.

3. Final Answer:

   The parent is missing the 'group' class; 'group-hover' on parent is invalid. -> Option B

4. Quick Check:

   Parent needs 'group', not 'group-hover' class [OK]

Hint: Parent must have 'group', not 'group-hover' class [OK]

Common Mistakes:

• Adding 'group-hover' class to parent instead of 'group'
• Using 'group-hover:' on parent element
• Confusing 'hover:' and 'group-hover:' prefixes

5. You want a card component where hovering the card changes the border color of a nested button and also shows a hidden icon inside the button. Which Tailwind setup correctly uses group-hover to achieve this?

<div class='card group p-4 border rounded'>
  <button class='border group-hover:border-blue-600 p-2 relative'>
    Click Me
    <svg class='hidden group-hover:block absolute right-2 top-2 w-4 h-4'>...</svg>
  </button>
</div>

hard

A. This setup works because the parent has 'group' and children use 'group-hover:' to change styles and show elements.

B. This setup fails because 'group-hover:' cannot be used on SVG elements.

C. This setup fails because the button needs the 'group' class, not the parent.

D. This setup fails because 'hidden' cannot be toggled with 'group-hover:block'.

Solution

1. Step 1: Confirm parent has 'group' class

   The div with class card group enables group-hover effects on children.

2. Step 2: Check child elements use 'group-hover:' correctly

   The button changes border color with group-hover:border-blue-600, and the SVG icon toggles visibility with hidden group-hover:block.

3. Step 3: Verify no misuse of classes

   SVG can be shown/hidden with these classes, and the button correctly inherits hover from parent.

4. Final Answer:

   This setup works because the parent has 'group' and children use 'group-hover:' to change styles and show elements. -> Option A

5. Quick Check:

   Parent 'group' + child 'group-hover:' = interactive hover effects [OK]

Hint: Parent 'group' enables all child 'group-hover:' effects together [OK]

Common Mistakes:

• Adding 'group' to button instead of parent
• Thinking 'group-hover:' can't toggle display
• Forgetting 'hidden' class on icon initially