悬停状态
Hover State
交互模式也叫：hover、鼠标悬浮、鼠标经过效果
一句话：鼠标移到元素上方时的样式变化，比如按钮变深、卡片浮起，用来提示用户这里可以点击。
详细解释
悬停状态用 CSS 的 :hover 实现，是桌面端最基础的交互反馈：按钮背景变深一点、链接出现下划线、卡片加阴影并轻微上移、表格行背景变浅灰，同时鼠标变成手形 cursor: pointer。它回答的是用户心里的问题「这个能点吗」。
变化要克制：颜色深浅、阴影、几像素的位移就够了，配合 150~200ms 的过渡动画会更顺滑。不要在悬停时改变元素尺寸，否则会把周围内容挤动。
手机上没有悬停，所以重要信息和操作不能只在悬停时出现。比如悬停才显示的删除按钮，在手机上要常驻或换成其他入口。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
商品卡片加悬停效果：鼠标移上去时卡片向上移动 4px、阴影加深，标题出现下划线，鼠标变手形，过渡时间 200ms；手机端不需要这个效果，卡片右上角的收藏按钮在手机端要一直显示。