Hover

You might say

Change the button color on hover so people know they can click it.

Respond when a pointer rests over an interactive elementHover can preview that an item is interactive or reveal secondary detail before a click. It does not exist on touch-only devices, so essential content and actions must remain available without it. Keep the visual change clear but stable.

:hover

Hover meLift + shadow + color Color on hover ControlNo reaction at all Hover each one and feel the difference between clickable and not

You can say this to an AI Agent

Keep a restrained card hover state, but do not expose Delete only on hover. Make it discoverable through keyboard focus and a touch-friendly menu without jumpy movement. Complete the delete confirmation with mouse, Tab, and mobile touch.

When to use it

Highlight a clickable card
Save→Save
Reveal a short secondary control
→
Preview link or chart detail
Requirements doc v3✎ 🗑
Support pointer users with an extra cue
Profit margin: gross profit ÷ revenueProfit margin ⓘ

When NOT to use it

Hide essential actions behind hover only
⚙There is no hover on mobile, so this hint never appears.
Move the target so much that it becomes hard to click
Required! You cannot submit without it.Submit
Apply hover styling to non-interactive content
Hover
Forget matching keyboard focus behavior
Project settingsEdit

Anatomy

Hover meChange color / float / shadowtransition .15s

Hover begins the moment the pointer enters its bounds

Color change, lift, or shadow — keep it light

A 0.1–0.2s smooth switch, no jarring jumps

Variants

Color

ButtonButton

The lightest feedback for buttons and links

Lift

Cards hinting you can click through

Reveal

Doc v3 ✎ 🗑

Secondary actions stay tucked away by default

Typical use cases

Button

2026 Product Roadmap

Hovering: color change + slight lift, signaling “clickable”

Card

Hiking Trail Guide

2.3k reads · 3 days ago

Desk Setup Ideas

8.1k reads · Yesterday

Navigation link

📄 PRD v3.md10:24

📊 dashboard.fig✎🗑

🖼 cover-final.pngYesterday

Row hover: highlights the row, edit and delete fade in

Chart point

✎ Save ★ ⬇ ⋯

Hover an icon button to reveal what it does

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

A card's Delete action appears only on mouse hover, so touch and keyboard users cannot find it. What should change?

A. Keep hover-only visibility but make the action appear fasterB. Keep restrained hover feedback and also support focus and touch accessC. Keep hover on desktop and remove the Delete action on mobile