一、使用场景

电脑网站新增悬停容器模块，可实现鼠标移入模块后，展示不同样式的特效。

二、功能说明

【版本】初级版及以上版本

三、设置教程

1. 配置悬停容器模块的入口（二选一）

通过电脑网站设计器悬浮面板【模块-新增模块-排版-悬停容器】路径，拖拽悬停容器到指定位置，即可选择添加模块或素材。

也可使用空白内容的“ 自由容器 ”，鼠标悬停在模块右上角，选择工具栏中的“悬停特效”按钮，便可开始配置。

2. 编辑展示效果

选择悬停效果素材后，可编辑其初始与悬停状态下的图文展示效果。

鼠标悬停在容器右上方，选择工具栏中 “配置悬停容器”，编辑更多的背景特效及容器特效。

3. 操作动图

添加“悬停容器”模块，配置悬停容器。

如下图所示：

悬停效果展示：

交互设计建议

以下补充内容用于帮助你在悬停容器里做交互效果时，让动效服务表达而不是干扰阅读：

• 触发克制：悬停效果更适合用于卡片、按钮或提示信息，不建议把大段正文都做成悬停切换。
• 可读优先：悬停前后的信息应保持可读性，避免因遮挡或透明导致文字难以识别。
• 移动端预期：手机端没有 hover 行为，建议同时准备点击或直接展示的替代方案。
• 性能复查：多个悬停容器同时使用时建议检查性能，避免低配设备滚动卡顿。