DESIGN NOTES
为什么值得收藏
- 按需显现倒计时按钮在默认状态隐藏,鼠标悬停时出现。
- 效果描述向 AI 描述为鼠标进入倒计时区域后显示操作按钮、移出后隐藏;显示范围限定在倒计时模块内。原文未指定过渡时长。
同源设计合集 · 6 项
UI 组件
结合原始资料,按需应用到自己的设计中。
实现一个悬停显现的倒计时按钮(原生 HTML/CSS/JS,零依赖,单文件交付): 【效果描述】倒计时卡片默认只显示倒计时信息。鼠标进入倒计时模块时,在模块内部显现操作按钮;移出后隐藏。按钮不得出现在模块外,也不得遮挡倒计时数字。 【交互参数】以模块边界作为悬停触发范围;进入时显示,移出时隐藏。过渡时长设为可调参数,默认 150ms;原图未指定时长。键盘焦点进入模块时同样显示按钮,焦点离开后隐藏;触屏点击模块可切换显示状态。倒计时归零后禁用不再适用的操作,并保持布局稳定。 【使用示例】工作台倒计时卡片悬停后显示“暂停”;活动倒计时模块悬停后显示“查看详情”。 【实现要点】先建立独立的倒计时模块和按钮;再用模块的悬停与焦点状态控制按钮显隐;最后用少量 JS 处理触屏切换及倒计时归零状态。将过渡时长和按钮位置写成带注释的可调参数。 【质量要求】交付可直接运行的单个 HTML 文件。所有样式限定在组件内,类名使用 `uw-` 前缀,不污染全局样式;支持 `prefers-reduced-motion`,启用时取消显隐动画;按钮可通过键盘操作,并提供清晰的焦点样式。 【参考资源】 - 资料详情:https://ui.undoai.cn/components/x-hub-countdown-hover-action/ - Demo 源码:https://ui.undoai.cn/components/x-hub-countdown-hover-action/demo.html - 原始设计参考图:https://ui.undoai.cn/components/x-hub-countdown-hover-action/refs/01.jpg(倒计时按钮悬停状态的原图参考)
将提示词与你的页面背景、技术栈和目标尺寸一起交给代码助手。实现后对照原图检查布局和状态,再验证键盘、触控和减少动态效果。
展开后加载源代码
查看 Markdown 全文,复制或下载 design.md 后交给开发者使用。
# 悬停显现的倒计时按钮 — design.md 内容版本:sha256:887962355a0917ceb963e8c4bbab71c5a361fc97e571b10a066683659b861ca0 本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明;未提供的数值不作推断。实现建议须在后续开发中选择和验收。 ## 元数据记录 - 资产:components/x-hub-countdown-hover-action;语义类型:interaction。 - 分类:按钮。 - 标签:悬停、倒计时、渐进呈现。 - 场景:倒计时卡片日常浏览、鼠标悬停查看可用操作、减少工作台常驻按钮。 - 平台:未提供。 - 风格:未提供。 ### 亮点声明 - 按需显现:倒计时按钮在默认状态隐藏,鼠标悬停时出现。 - 效果描述:向 AI 描述为鼠标进入倒计时区域后显示操作按钮、移出后隐藏;显示范围限定在倒计时模块内。原文未指定过渡时长。 ### 实际文件与参考资源 - `demo.html`(sha256:7fb8d853e408339adba6ff76371050e57cfda79a549367abcd6ccf626276499e) - `meta.yml` - `refs/01.jpg`(sha256:5a3954c81d580bc2016476f951f344cc6ad13fadcba4fcee174907d4c34f4b05) - 参考图:`refs/01.jpg`;倒计时按钮悬停状态的原图参考。 - 实现摘要:sha256:7fb8d853e408339adba6ff76371050e57cfda79a549367abcd6ccf626276499e。 ## 未提供 - 未结构化记录的精确色值、字号、间距、断点、动效时长与状态转换参数不作推断;亮点中的数值属于元数据声明,demo 的存在与摘要不代表浏览器行为已验收。 ## 实现建议 - 按正常、悬停、聚焦、激活、禁用、加载、成功和错误状态定义适用的状态表。 - 使用语义化元素,验证键盘操作、焦点可见性、触控目标和减少动效偏好。 - 以 demo.html 为实现参考,逐项验证交互、窄屏布局、文本溢出和错误恢复;具体参数由实现与验收确认。
在完整提示词后补充你的要求;生成提示词不会创建新资产。
DESIGN NOTES
GOOD FOR