悬停发光
Hover Glow
别名:悬浮发光hover 发光按钮发光鼠标放上去发光边缘光晕glow effect
这是什么
鼠标悬停时元素边缘泛出柔和光晕，用外发光阴影或径向渐变沿边框晕开， 颜色多为品牌强调色。相比投影的"物理抬升"，光晕暗示的是"能量"与"可交互"， 常用于深色界面、游戏感产品与霓虹风格按钮。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 深色界面上突出主操作按钮或图标
- 霓虹 / 游戏 / 科技感的产品调性
- 与 hover-lift 二选一，避免同时叠加
✕ 不适用场景
- 浅色背景上低对比光晕（几乎不可见）
- 大面积元素整块发光（刺眼且廉价）
- 信息密集的工具界面（光晕分散注意力）
常见形式
柔和外发光
Soft outer glow
box-shadow 大模糊 + 强调色，最常用
边框流光
Border gradient
径向渐变沿边框晕开，霓虹感更强
内发光
Inner glow
inset 阴影向内晕光，适合深色卡片
实现要点
box-shadowradial-gradienttransition:hover基础写法是 transition: box-shadow 200ms 后在 :hover 加 0 0 0 1px + 0 0 24px 两层强调色阴影；更高级的边框流光用伪元素 + 径向渐变 配合 mask 或 background 定位动画。光晕颜色取品牌强调色并保持 40%～60% 透明度， 避免纯白发光。触屏设备用 @media (hover:hover) 门控。
横向对比
查看完整对比 →交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为当前项目的主操作按钮添加 hover 发光反馈。 先检查现有按钮层级与强调色令牌，保持一致。 要求： - hover 时 1px 描边 + 24px 强调色外发光，200ms 过渡 - 仅主按钮发光，次要按钮降级为描边着色 - 仅在支持 hover 的设备启用（@media hover:hover） - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
鼠标悬停时卡片或按钮轻轻上浮（translateY -2～6px）并加深投影， 像被无形的手托起。最常见的"这个可以点"的桌面端暗示， 成本极低但立刻让页面有层次和呼吸感。
动效替代方案用户按下按钮、卡片等可点击元素时，元素轻微缩小（通常 0.95～0.98）， 松开后弹回。一个几十毫秒的细节，让界面"手感"立刻从网页变成实体按键。
动效相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件应用于用半透明磨砂玻璃质感表示悬浮层级的视觉语言：backdrop-filter 背景模糊 + 低透明度 填充 + 一圈细窄的白色高光描边，让面板像磨砂玻璃片一样透出底下的色彩与图形。 它强调"层"——玻璃之下必须有可透出的丰富背景，否则质感无从谈起。
风格搭配使用