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.