0
0
Tailwindmarkup~5 mins

Group-hover (parent triggers child) in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Group-hover lets a parent element control the hover style of its child elements. This helps create interactive designs where hovering over one part changes others.

You want a button's background to change when hovering over its text.
You want to highlight an icon inside a card when the whole card is hovered.
You want to show hidden text or change color inside a menu item when hovering over the menu item.
You want multiple child elements to change style together when hovering over their container.
Syntax
Tailwind
<parent class="group">
  <child class="group-hover:<utility>">Child content</child>
</parent>
Add group class to the parent element to enable group-hover.
Use group-hover: prefix on child classes to apply styles when parent is hovered.
Examples
The paragraph text turns red when you hover over the parent div.
Tailwind
<div class="group">
  <p class="group-hover:text-red-500">Hover me!</p>
</div>
The text inside the button gets underlined when hovering over the whole button.
Tailwind
<button class="group bg-gray-200 p-4">
  <span class="group-hover:underline">Click me</span>
</button>
The icon color changes to blue when hovering over the container div.
Tailwind
<div class="group border p-4">
  <svg class="group-hover:fill-blue-500" width="24" height="24">
    <!-- icon -->
  </svg>
</div>
Sample Program

This example shows a box with a heading, paragraph, and button. When you hover anywhere on the box, all child elements change color together using group-hover.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Group Hover Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-50">
  <div class="group border-2 border-gray-400 rounded-lg p-6 cursor-pointer max-w-xs">
    <h2 class="text-lg font-semibold group-hover:text-blue-600">Hover over this box</h2>
    <p class="mt-2 text-gray-700 group-hover:text-blue-400">The text color changes when you hover the whole box.</p>
    <button class="mt-4 px-4 py-2 bg-gray-300 rounded group-hover:bg-blue-500 group-hover:text-white transition-colors">
      Button changes color
    </button>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Remember to add the group class to the parent container.

Use group-hover: prefix only on child elements you want to change on hover.

Combine with transition classes for smooth color changes.

Summary

Group-hover lets a parent control hover styles of its children.

Add group to parent and group-hover: to child classes.

This helps create interactive, connected hover effects easily.