Hover states

Pure-CSS hover utility variants for color, opacity, scale, and shadow elevation.

hover: variants apply styles on :hover without JavaScript. Combine with transition for smooth animations.

<a href="#" class="text-muted-foreground hover:text-primary transition">Hover link</a>
<img class="rounded-md transition hover:scale-102 hover:opacity-75" src="/thumb.jpg" alt="" />

In HTML markup, write class="hover:bg-primary". The selector is escaped internally as .hover\:bg-primary.

Text color

hover:text-{role} for all semantic roles (primary, muted, card, destructive, etc.).

Background

hover:bg-{role} for all background roles, plus hover:bg-transparent and hover:bg-none.

Border

hover:border-{color} for all color roles. Pair with a border class:

<div class="border hover:border-primary rounded-md p-md transition">Card</div>

Opacity & scale

Family	Classes
Opacity	`hover:opacity-0`, `hover:opacity-25`, `hover:opacity-50`, `hover:opacity-75`, `hover:opacity-100`
Scale	`hover:scale-0`, `hover:scale-50`, `hover:scale-75`, `hover:scale-90`, `hover:scale-95`, `hover:scale-100`, `hover:scale-102`, `hover:scale-110`, `hover:scale-125`, `hover:scale-150`

Shadow

hover:shadow-{size} (shadow-none, shadow-xs to shadow-xl):

<div class="shadow-sm hover:shadow-lg rounded-md p-md transition">Lifts on hover</div>

Active (pressed) states should be styled in component CSS with :active rather than utility classes.