提示词商城
AI 写作
图片
视频
热门角色
热门业务
模型专用
提示词工具
非会员
非会员
×
¥元
查看详情
首页 / CSS悬停效果设计专家
🔥 会员专享 文生文 其它

CSS悬停效果设计专家

👁️ 81 次查看
📅 Dec 4, 2025
💡 核心价值： 本提示词专为网页开发场景设计，能够根据用户指定的HTML元素类型、悬停效果样式和交互需求，生成专业、精准的CSS悬停效果代码。提示词采用分步工作流程，确保从需求分析到代码实现的完整链路，涵盖视觉效果、过渡动画、浏览器兼容性等关键要素，帮助开发者快速获得可直接使用的CSS代码解决方案，提升网页交互体验设计效率。

🎯 可自定义参数（3个）

元素类型
需要添加悬停效果的HTML元素类型
效果样式
悬停时希望呈现的视觉效果类型
交互需求
对悬停交互的具体功能需求

🎨 效果示例

效果预览

  • 主按钮默认为品牌蓝纵向渐变；鼠标悬停或键盘聚焦（focus/focus-visible）时，渐变整体加深（更深蓝），过渡时长0.25s，缓动为ease-out。
  • 暗色主题下使用适配的蓝色阶梯，保证对比度与可读性。
  • Windows 高对比/强制颜色模式下自动切换为系统颜色，聚焦有清晰对比的可见焦点环。

CSS代码

:root {
  /* 品牌蓝阶（亮色主题） */
  --brand-blue-500: #2B72FF; /* 顶部渐变色（默认） */
  --brand-blue-600: #1E56E6; /* 底部渐变色（默认）/ 悬停顶部 */
  --brand-blue-700: #1641B8; /* 悬停底部 */
  --btn-text-on-blue: #FFFFFF;

  /* 渐变定义 */
  --btn-bg: linear-gradient(180deg, var(--brand-blue-500) 0%, var(--brand-blue-600) 100%);
  --btn-bg-hover: linear-gradient(180deg, var(--brand-blue-600) 0%, var(--brand-blue-700) 100%);

  /* 焦点环（可见焦点） */
  --focus-ring: rgba(32, 93, 235, 0.35);
}

/* 暗色主题：适配更明亮的蓝阶，保持白字对比度 */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-blue-500: #6C98FF;
    --brand-blue-600: #4B78FF;
    --brand-blue-700: #2F5DE0;
    --focus-ring: rgba(120, 160, 255, 0.45);
  }
}

/* 基础按钮样式（可复用） */
.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  font: 600 0.9375rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  padding: 0.625rem 1rem;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

/* 主按钮：品牌蓝渐变 */
.btn--primary {
  color: var(--btn-text-on-blue);
  background: var(--btn-bg);
  transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out;
}

/* 悬停与聚焦：同色（更深蓝渐变） */
.btn--primary:hover,
.btn--primary:focus {
  background: var(--btn-bg-hover);
}

/* 可见焦点：在保持同色的同时增加外层焦点环，提升可达性 */
.btn--primary:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

/* 点击态（可选：略微更深，快速反馈） */
.btn--primary:active {
  background: linear-gradient(180deg, var(--brand-blue-700) 0%, #10379A 100%);
  transition-duration: 0.12s;
}

/* 禁用态 */
.btn--primary[disabled],
.btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transition: none;
}

/* 减少动态偏好 */
@media (prefers-reduced-motion: reduce) {
  .btn--primary {
    transition: none;
  }
  .btn--primary:focus-visible {
    box-shadow: 0 0 0 2px var(--focus-ring);
  }
}

/* 高对比/强制颜色模式：使用系统颜色，保证可读性与焦点可见性 */
@media (forced-colors: active) {
  .btn--primary {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }
  .btn--primary:hover,
  .btn--primary:focus {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
  .btn--primary:focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
    box-shadow: none;
  }
}

实现原理

  • 渐变与颜色变量：使用CSS变量定义品牌蓝阶与渐变，默认态用 --btn-bg，悬停/聚焦态切换为 --btn-bg-hover，保证“从品牌蓝到更深蓝”的一致性。
  • 过渡效果：transition 将 background/color/border-color/box-shadow 在0.25s内以ease-out插值，既平滑又不拖沓。
  • 焦点可达性：:focus 与 :hover 同色，满足“focus状态同色”；借助 :focus-visible 单独添加外层 box-shadow 焦点环，兼顾键盘可见性。
  • 暗色主题：通过 prefers-color-scheme 动态替换蓝色阶变量，确保在深背景上仍具备足够对比度与层次。
  • 高对比模式：使用 @media (forced-colors: active) 切换为系统语义色（ButtonFace/Highlight等），并用 outline 提供可靠的焦点指示，避免自定义渐变影响可读性。

兼容性说明

  • transition/linear-gradient/:focus-visible/媒体查询在现代浏览器均已支持：Chrome 88+、Edge 88+、Firefox 85+、Safari 15+。
  • prefers-color-scheme：Chrome 76+、Edge 79+、Firefox 67+、Safari 12.1+。
  • forced-colors: active：Chromium Edge 79+（Windows 高对比模式），其他浏览器不影响正常样式。
  • 已使用 -webkit-appearance 以提升移动端一致性；其余属性无需前缀。
  • 渐变背景的过渡在旧版浏览器可能以淡入淡出方式插值，但不会影响交互正确性。

使用建议

  • HTML用法： 或 主要操作。
  • 品牌定制：仅需在 :root 中调整 --brand-blue-500/600/700 即可批量更新颜色；暗色主题在对应 @media 中覆写。
  • 焦点策略：若设计稿要求去除焦点环，请至少在 forced-colors 保留 outline，或在 :focus-visible 中使用与背景形成对比的环色，保证可访问性。
  • 性能建议：避免在同一页面为大量元素同时触发阴影过渡；本方案仅对交互态进行有限过渡，性能开销低。
  • 组件扩展：可为小/大尺寸按钮创建尺寸变量（如 --btn-padding-x/y）并在 .btn 基类中引用，保持一致的过渡与主题适配。

效果预览

  • 初始状态：卡片保持圆角与柔和的 2dp 阴影。
  • 悬停/键盘聚焦时：卡片以 0.2s 过渡轻轻上移 2px，阴影提升为柔和的 6dp，同时提升层级避免被相邻元素遮挡。
  • 移动端：无悬停设备上改用按下（:active）触发，阴影仅提升至 4dp，上移 1px，整体弱化以保证稳定性。

CSS代码

/* Elevation hover card: 2dp -> 6dp (mobile: 4dp) */
:root {
  /* 可按需覆盖 */
  --card-radius: 12px;
  --shadow-2dp: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-4dp: 0 3px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
  --shadow-6dp: 0 8px 24px rgba(0,0,0,0.16), 0 3px 8px rgba(0,0,0,0.10);
}

.card {
  position: relative; /* 使 z-index 生效 */
  border-radius: var(--card-radius);
  background-color: #fff;

  /* 阴影：先给出兼容回退值，再使用变量值 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  box-shadow: var(--shadow-2dp);

  /* 轻量 GPU 合成，减少重绘抖动 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);

  z-index: 0;

  /* 0.2s 过渡（含前缀） */
  transition:
    box-shadow 0.2s ease,
    -webkit-transform 0.2s ease,
    transform 0.2s ease;
}

/* 悬停/可聚焦容器内元素时的提升态 */
.card:hover,
.card:focus-within {
  /* 阴影：回退 + 变量 */
  box-shadow: 0 8px 24px rgba(0,0,0,0.16), 0 3px 8px rgba(0,0,0,0.10);
  box-shadow: var(--shadow-6dp);

  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);

  z-index: 3; /* 提升层级，避免被相邻卡片投影覆盖 */
  will-change: transform, box-shadow; /* 仅在交互发生时提示浏览器优化 */
}

/* 可选：让媒体内容继承圆角（不影响阴影圆角） */
.card img,
.card .media {
  display: block;
  border-radius: inherit;
}

/* 移动端（无悬停/粗指针）弱化效果，使用 :active 反馈 */
@media (hover: none) and (pointer: coarse) {
  .card {
    transition-duration: 0.18s; /* 触摸反馈略快一些 */
  }
  .card:active {
    /* 阴影：回退 + 变量 */
    box-shadow: 0 3px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
    box-shadow: var(--shadow-4dp);

    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
  }
}

/* 无动画偏好：关闭位移动画，保留状态切换 */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  .card:hover,
  .card:focus-within,
  .card:active {
    -webkit-transform: none;
    transform: none;
  }
}

实现原理

  • box-shadow：使用 2 层柔和阴影模拟 2dp/4dp/6dp 层级，悬停时仅过渡 box-shadow 和 transform，性能较优。
  • transform: translateY：用轻微上移（-2px/-1px）模拟“抬起”手感，同时触发合成层，减少抖动。
  • will-change：只在悬停/聚焦时声明，避免长时间占用内存。
  • z-index + position: relative：交互态提高 z-index，避免卡片被相邻元素投影遮挡；transform 本身会创建堆叠上下文，但明确 z-index 更可控。
  • 媒体查询：在无悬停设备上用 :active 弱化反馈，保持移动端稳定；在用户开启“减少动态效果”时取消位移动画，提升可访问性。
  • 圆角：设置 border-radius 并让内层媒体继承，实现视觉一致；阴影自然遵循外轮廓。

兼容性说明

  • transform、box-shadow、transition：主流浏览器均长期支持（Chrome 36+、Firefox 16+、Safari 7+、Edge 12+）。
  • will-change：Chrome/Edge/Firefox/Safari 支持；IE 会忽略，不影响效果。
  • CSS 变量：Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+。已提供回退阴影值，即使不支持变量也能正常显示。
  • 媒体查询 (hover/pointer)：现代浏览器广泛支持；老旧环境仅不会启用移动端弱化逻辑，但基本悬停仍可用。
  • IE 11：忽略 CSS 变量与 will-change，但 transform/transition/box-shadow 正常，整体可降级使用。

使用建议

  • HTML 使用方式：给需要交互的卡片容器添加类名 .card；内部内容不限，图片/媒体元素建议继承圆角。
  • 容器溢出：避免在卡片父级设置 overflow: hidden；否则投影可能被裁切。如必须裁切，保留父级内边距以留出投影空间。
  • 主题定制：可在 :root 或局部容器上覆盖 --card-radius、--shadow-* 以适配不同视觉风格。
  • 列表场景：卡片紧邻时建议为悬停卡片增加 z-index（已内置），避免投影被覆盖。
  • 性能：避免在同屏大量元素同时处于悬停态；will-change 仅在交互时生效已避免内存占用。

效果预览

  • 鼠标悬停或键盘聚焦在导航链接上时，底部出现一条与文本同色的细下划线。
  • 下划线在 60ms 延迟后，从书写方向的起点向终点描边展开（LTR：左→右；RTL：右→左），动画时长 0.18s，缓动为 ease-in。
  • 移出时快速收回，不额外延迟。
  • 保留浏览器默认的键盘可见焦点（outline），无障碍友好。

CSS代码

/* 可调参数 */
:root {
  --nav-underline-h: 2px;                 /* 下划线厚度 */
  --nav-underline-gap: 0.15em;            /* 与文字底部的间距（正值向下） */
  --nav-underline-color: currentColor;    /* 颜色跟随文字色 */
  --nav-underline-dur: 0.18s;             /* 动画时长 */
  --nav-underline-ease: ease-in;          /* 动画缓动 */
  --nav-underline-delay-in: 60ms;         /* 进入延迟 */
  --nav-underline-delay-out: 0ms;         /* 离开延迟（设为0，响应更快） */
}

/* 导航链接基础样式（示例：.nav 为容器类名） */
.nav a {
  position: relative;
  display: inline-block;   /* 确保伪元素定位基准可靠 */
  text-decoration: none;   /* 去除默认下划线 */
  /* 建议：如需为下划线留出空间，可解注下一行 */
  /* padding-bottom: calc(var(--nav-underline-gap) + var(--nav-underline-h)); */
}

/* 下划线伪元素：默认收起 */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0; /* 覆盖整行内容宽度 */
  bottom: calc(-1 * var(--nav-underline-gap));
  height: var(--nav-underline-h);
  background-color: var(--nav-underline-color);

  /* 用 scaleX 实现描边动画（性能优） */
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform-origin: left center; /* LTR 下从左向右 */
  transition: transform var(--nav-underline-dur) var(--nav-underline-ease) var(--nav-underline-delay-out);
  -webkit-transition: -webkit-transform var(--nav-underline-dur) var(--nav-underline-ease) var(--nav-underline-delay-out);
  pointer-events: none; /* 避免伪元素拦截事件 */
}

/* RTL 支持：从右向左描边 */
[dir="rtl"] .nav a::after {
  transform-origin: right center;
}

/* 悬停 + 键盘聚焦时展开（包含 :focus 作为对不支持 :focus-visible 的回退） */
.nav a:is(:hover, :focus-visible, :focus)::after {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
  transition-delay: var(--nav-underline-delay-in);
  -webkit-transition-delay: var(--nav-underline-delay-in);
}

/* 可见焦点：保留默认轮廓并略微抬升可读性 */
.nav a:focus-visible {
  outline-offset: 2px;
}

/* 降级动效：尊重用户的减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .nav a::after {
    transition-duration: 0.01ms;
    -webkit-transition-duration: 0.01ms;
    transition-delay: 0ms;
    -webkit-transition-delay: 0ms;
  }
}

实现原理

  • 使用伪元素::after作为“可动画的下划线”，避免改变真实布局。
  • 通过transform: scaleX(...)与transform-origin控制描边方向：
    • LTR 中 origin 设为 left center，scaleX 从 0 → 1 实现左到右描边。
    • RTL 中通过 [dir="rtl"] 重置为 right center，从右到左描边。
  • transition-delay 在悬停/聚焦状态下改为 60ms，使进入动画延后执行；离开时延迟为 0ms，保证快速收回。
  • 使用 currentColor 让下划线自动跟随文字颜色，减少维护成本。
  • 使用 transform 动画（而非 width/left），能最大化利用合成层，降低重排与重绘，性能更优。

兼容性说明

  • transform/transition：Chrome 49+、Firefox 48+、Safari 9+、Edge 16+、iOS Safari 9+。
  • :focus-visible：Chrome 86+、Firefox 85+、Safari 15.4+；已提供 :focus 回退以覆盖旧浏览器。
  • [dir="rtl"] 选择器广泛支持，可安全用于 RTL 检测。
  • 已添加 -webkit- 前缀用于旧版 Safari 的 transform/transition。
  • 若需更老旧浏览器支持，可将描边效果退化为非动画的 border-bottom。

使用建议

  • 结构建议：给导航容器加 .nav 类，链接使用 a 元素；在需要 RTL 的页面根元素上添加 dir="rtl" 即可自动切换描边方向。
  • 间距处理：如下划线与文字太近，增大 --nav-underline-gap；若担心与内容相交，可为链接添加等量 padding-bottom。
  • 主题适配：可根据主题切换只修改文字颜色，因下划线使用 currentColor 会自动同步。
  • 交互一致性：为避免点击后残留焦点导致持续高亮，可在鼠标点击导航后按需移除焦点状态，但不建议普遍移除，以保证可访问性。
  • 性能：尽量避免在大量元素上叠加复杂阴影或渐变；本方案仅使用单个 transform，性能开销低，适合电商/后台的大量导航项使用。

示例详情

📖 如何使用

⚡ 30秒出活：复制 → 粘贴 → 搞定
与其花几十分钟和AI聊天、试错，不如直接复制这些经过千人验证的模板，修改几个 {{变量}} 就能立刻获得专业级输出。省下来的时间，足够你轻松享受两杯咖啡！
加载中...
💬 不会填参数？让 AI 反过来问你
不确定变量该填什么？一键转为对话模式，AI 会像资深顾问一样逐步引导你，问几个问题就能自动生成完美匹配你需求的定制结果。零门槛，开口就行。
转为对话模式 →
🚀 告别复制粘贴，Chat 里直接调用
无需切换，输入 / 唤醒 8000+ 专家级提示词。 插件将全站提示词库深度集成于 Chat 输入框。基于当前对话语境，系统智能推荐最契合的 Prompt 并自动完成参数化，让海量资源触手可及，从此彻底告别"手动搬运"。
即将推出
🔌 接口一调，提示词自己会进化
手动跑一次还行，跑一百次呢？通过 API 接口动态注入变量，接入批量评价引擎，让程序自动迭代出更高质量的提示词方案。Prompt 会自己进化，你只管收结果。
发布 API →
🤖 一键变成你的专属 Agent 应用
不想每次都配参数？把这条提示词直接发布成独立 Agent，内嵌图片生成、参数优化等工具，分享链接就能用。给团队或客户一个"开箱即用"的完整方案。
创建 Agent →

✅ 特性总结

根据元素与交互诉求，轻松生成可直接应用的悬停CSS代码，快速上线。
自动设计过渡与变换细节，避免突兀闪烁，让按钮、卡片、导航交互更顺滑。
一键选择效果风格与强度，提示词自动给出多方案对比，便于快速决策与试用。
内置浏览器兼容性说明与前缀处理，避免低版本异常，减少回归与线上风险。
提供使用建议与结构优化指南，帮助你在电商、企业官网、后台等场景快速套用。
支持按元素类型细分策略，如商品卡片、导航菜单、表格项等，一次生成全站统一风格。
自动控制动画时长与性能负载，兼顾顺滑与轻量，保障快速渲染与互动响应。
生成效果预览与原理解说，让团队沟通更高效，设计与开发可即刻对齐落地。
可按项目需求参数化定制，灵活控制颜色、阴影、缩放、位移等细节，保持品牌统一。
提供清晰使用步骤，复制即用，适配响应式，移动端交互同样自然顺滑。

🎯 解决的问题

为网页开发、设计与运营团队，提供一键生成专业悬停效果的智能提示词方案。用户只需描述目标元素、期望样式与交互诉求，即可获得可直接使用的高质量CSS代码与清晰说明，快速完成从需求到上线的闭环：统一站点的微交互风格、显著缩短设计‑开发沟通与实现时间、减少兼容性返工，提升页面的精细度与转化表现。

🕒 版本历史

当前版本
v2.1 2024-01-15
优化输出结构，增强情节连贯性
  • ✨ 新增章节节奏控制参数
  • 🔧 优化人物关系描述逻辑
  • 📝 改进主题深化引导语
  • 🎯 增强情节转折点设计
v2.0 2023-12-20
重构提示词架构，提升生成质量
  • 🚀 全新的提示词结构设计
  • 📊 增加输出格式化选项
  • 💡 优化角色塑造引导
v1.5 2023-11-10
修复已知问题，提升稳定性
  • 🐛 修复长文本处理bug
  • ⚡ 提升响应速度
v1.0 2023-10-01
首次发布
  • 🎉 初始版本上线
COMING SOON
版本历史追踪，即将启航
记录每一次提示词的进化与升级，敬请期待。

💬 用户评价

4.8
⭐⭐⭐⭐⭐
基于 28 条评价
5星
85%
4星
12%
3星
3%
👤
电商运营 - 张先生
⭐⭐⭐⭐⭐ 2025-01-15
双十一用这个提示词生成了20多张海报，效果非常好！点击率提升了35%，节省了大量设计时间。参数调整很灵活，能快速适配不同节日。
效果好 节省时间
👤
品牌设计师 - 李女士
⭐⭐⭐⭐⭐ 2025-01-10
作为设计师，这个提示词帮我快速生成创意方向，大大提升了工作效率。生成的海报氛围感很强，稍作调整就能直接使用。
创意好 专业
COMING SOON
用户评价与反馈系统，即将上线
倾听真实反馈，在这里留下您的使用心得，敬请期待。
加载中...
敬请期待...
📋
提示词复制
在当前页面填写参数后直接复制：