可变化图片

可变化图片用于制作鼠标移上去会换一张图的按钮或入口：平时显示「底图」，访客把鼠标移上去时显示「变化图」，点击整块区域可跳转到您设置的链接。常放在「图片背景容器」里，叠在楼层切图上的按钮位置。

组件能做什么

• 一张区域、两种画面：默认态与悬停态各用一张图，无需做两张热区。
• 整块可点击：设置链接后，点图片任意位置都能跳转（新页面打开）。
• 编辑器里可预览：鼠标移入组件上即可看到换图效果，方便对齐设计稿。
• 换图可自动对齐尺寸：设置底图或变化图后，会尽量按图片大小调整宽高，也可手动拖拽改大小。

设置项说明

常见用法

楼层里的 Tab / 分类按钮

在背景图楼层的 Tab 条上，每个标签放一个可变化图片：底图为未选中样式，变化图为选中或悬停样式，并分别设置对应分类页的链接。

产品卡片「悬停高亮」

产品区切图只画了默认态时，可用变化图补上悬停高亮图；若整张卡片都要跳转，填好链接即可。

与热区的区别

注意事项

• 底图、变化图都要上传：只设底图时，悬停可能没有变化或效果不完整。
• 两张图尺寸宜一致：宽高差别太大时，换图时容易显得跳动，设计切图时尽量统一。
• 摆进背景容器内：多放在「图片背景容器」里，用拖动或边距对齐切图上的按钮位置。
• 链接记得填写：未改链接时可能是示例地址，发布前务必改成真实页面。