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.