Group-hover (parent triggers child) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the child text color change when hovering over the parent.

Tailwind

<div class="group [1]">
  <p class="text-gray-500 group-hover:text-blue-500">Hover me!</p>
</div>

Drag options to blanks, or click blank then click option'

Ap-4

Bbg-white

Chover:bg-gray-200

Dborder

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add any hover class on the parent.

Adding hover classes only on the child instead of the parent.

The hover:bg-gray-200 class on the parent div triggers the hover state, allowing the child to respond with group-hover:text-blue-500.

2fill in blank

medium

Complete the code to make the child element visible only when hovering over the parent.

Tailwind

<div class="group relative">
  <button class="px-4 py-2 bg-gray-300">Menu</button>
  <ul class="absolute hidden [1]">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

Drag options to blanks, or click blank then click option'

Agroup-hover:block

Bgroup-focus:block

Cblock

Dhover:block

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover:block which only works if the element itself is hovered.

Forgetting to add group class on the parent.

The group-hover:block class makes the hidden list appear when the parent div is hovered.

3fill in blank

hard

Fix the error in the code to make the child text bold when hovering over the parent.

Tailwind

<div class="group">
  <p class="[1] group-hover:font-bold">Hover me!</p>
</div>

Drag options to blanks, or click blank then click option'

Afont-bold

Bfont-normal

Ctext-gray-700

Dfont-light

Attempts:

3 left

💡 Hint

Common Mistakes

Setting the child font weight to bold initially.

Not using the group class on the parent.

The child should start with font-normal so that group-hover:font-bold changes it on hover. If it starts bold, the hover effect won't show a change.

4fill in blank

hard

Fill both blanks to make the child background color change and text color change when hovering over the parent.

Tailwind

<div class="group [1]">
  <p class="p-2 [2] group-hover:text-white">Hover me!</p>
</div>

Drag options to blanks, or click blank then click option'

Ahover:bg-green-500

Bbg-green-300

Cbg-green-700

Dhover:text-green-700

Attempts:

3 left

💡 Hint

Common Mistakes

Not adding hover background on the parent.

Setting the child's background color to a dark shade initially.

The parent needs a hover background color class to trigger the group-hover effect. The child starts with a lighter green background bg-green-300 and changes text color on hover.

5fill in blank

hard

Fill all three blanks to create a card that changes border color, shadow, and text color on child when hovering over the parent.

Tailwind

<div class="group border-2 [1] p-4 rounded">
  <h2 class="text-lg font-semibold [2] group-hover:text-purple-700">Card Title</h2>
  <p class="text-gray-600 [3]">Card content goes here.</p>
</div>

Drag options to blanks, or click blank then click option'

Ahover:border-purple-500

Bgroup-hover:shadow-lg

Cgroup-hover:text-gray-800

Dhover:shadow-md

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover classes on children instead of group-hover.

Forgetting to add the group class on the parent.

The parent div changes border color on hover with hover:border-purple-500. The child heading gets a shadow on group hover with group-hover:shadow-lg. The paragraph text color changes on group hover with group-hover:text-gray-800.

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