Group Hover
Style children when a parent is hovered using group.
Syntax
parent: class="group" child: class="group-hover:text-cyan-600"Mark a parent with group, then children use group-hover: to react when the parent is hovered. This lets a whole card respond to one hover.
Example
Loading editor…
Press Run to see the result.
When to use it
- A product card reveals a hidden 'Quick View' button when the user hovers the card by using group on the card and group-hover:opacity-100 on the button.
- A list item changes its icon color from gray to blue when the whole row is hovered by marking the row as group and the icon as group-hover:text-blue-500.
- A navigation link changes both its text color and an arrow icon's transform on hover using group and group-hover: utilities.
More examples
Reveal button on card hover
group on the card wrapper makes group-hover: on the button respond to the card's hover state, not just the button's own hover.
<div class="group relative bg-white border rounded-lg overflow-hidden">
<img src="product.jpg" alt="" class="w-full h-48 object-cover">
<button
class="absolute inset-x-0 bottom-0 py-2 bg-black/70 text-white text-sm
opacity-0 group-hover:opacity-100 transition-opacity"
>
Quick View
</button>
</div>Icon color change on row hover
Both the icon and the label text change color when the list row (the group) is hovered, coordinating visuals from a single hover region.
<li class="group flex items-center gap-3 p-3 hover:bg-gray-50 rounded cursor-pointer">
<svg class="w-5 h-5 text-gray-400 group-hover:text-indigo-500 transition-colors"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
<span class="text-gray-700 group-hover:text-gray-900">Dashboard</span>
</li>Nested group with group/label
Named groups (group/card) allow scoped group-hover targeting when multiple nested group elements are present on the page.
<div class="group/card bg-white border rounded p-4 hover:border-indigo-400">
<h3 class="font-semibold group-hover/card:text-indigo-600">Feature</h3>
<p class="text-sm text-gray-500 group-hover/card:text-gray-700">Description</p>
</div>
Discussion