Point at each one: the tint, the rise and the glow are three different hover effects
Hover Highlight vs. Hover Lift vs. Cursor Spotlight
/ :hover · @media (hover: hover) /
also called hover effect, hover state, state layer (Material), spotlight card
“When you hover over a button, it changes color” is a hover highlight, the pale tint CSS paints with :hover (Material calls it a state layer). Its two cousins: a hover lift moves a card up a few pixels and deepens the shadow under it, and a cursor spotlight is a soft circle of light that follows the pointer inside a dark card, often brightening the border nearest it (Magic UI MagicCard, Aceternity Card Spotlight). Touch screens have no hover, so guard these with @media (hover: hover) and never hide information behind them. A popup preview on hover is a hover card; a small text label is a tooltip.
If you called it…
…you meant Hover Highlight vs. Hover Lift vs. Cursor Spotlight.
Anatomy — every part, named
- 1Hover highlight (state layer)
:hover { background-color }“The button changes color when the mouse is on it” is the hover highlight, a pale tint over the row or button.
- 2Hover lift
transform: translateY(-4px) + box-shadow“The card that floats up under the mouse” is a hover lift: it rises a few pixels and its shadow grows larger and softer.
- 3Cursor spotlight
radial-gradient(circle at var(--x) var(--y), …)“The light that follows the mouse inside the card” is a cursor spotlight, a soft radial glow that also brightens the nearest edge of the border.
Prompt — paste into your agent
Add hover effects, guarded with @media (hover: hover): a hover highlight on buttons and rows (a pale :hover background tint, 150 ms ease-out), a hover lift on cards (translateY(-4px) plus a larger, softer box-shadow, 200 ms), and a cursor spotlight on dark cards (a radial-gradient(circle at var(--x) var(--y), …) glow whose --x and --y follow pointermove, brightening the nearest border). Never hide information behind hover.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my hover effect (:hover, @media (hover: hover), radial-gradient with --x/--y from pointermove). Rule out: the card jittering at its bottom edge because the lift moves it out from under the pointer (put :hover on a still wrapper); the hover state sticking after a tap on touch screens because the rule isn't inside @media (hover: hover); the glow jumping to the top-left corner on enter because --x and --y start unset; the spotlight lagging because pointermove triggers a React re-render instead of setting a CSS variable; the shadow change stuttering because box-shadow isn't in the transition list; the tint invisible in dark mode because it's a black overlay on a dark fill. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| CSS | :hover | |
| CSS | @media (hover: hover) | only on devices with a real pointer; Tailwind's hover: uses it |
| CSS | radial-gradient(circle at var(--x) var(--y), …) | the spotlight, with --x and --y set from pointermove |
| Magic UI | <MagicCard> | gradientSize, gradientColor, gradientOpacity |
| SwiftUI | .onHover(perform:) | iOS 13.4+, macOS 10.15+ |
| AppKit | NSTrackingArea |