网站后台 - 悬停盒子模块

一、网站后台 - 悬停盒子

1.1功能和作用

实现页面鼠标移入带来的动态交互效果。

网站后台

二、网站后台 - 模块设置

路径：网站后台编辑页面——添加模块——悬停盒子——拖到页面合适位置

网站后台

选择鼠标移入的切换效果及手机显示端。

网站后台

保存后，鼠标移到模块右上角会显示两个标签，默认跟悬停。鼠标点击切换两个区，分别添加模块到两个区的盒子内容区，即可。（默认区是页面默认显示的内容，悬停区是鼠标移入显示的内容）

网站后台

三、使用方法

3.1 以上述动态图为例，先把默认的图片模块添加到默认区域

网站后台

3.2 点击模块上方悬停切换到悬停，再把图文模块及文本模块添加到悬停内容区

网站后台

3.3 鼠标移至悬停盒子的样式编辑，调整悬停的背景为黑色，把透明度调为一半左右，有磨砂透明效果（可根据喜好调整）

网站后台

3.4 细节调整二维码及文字的模块内边距，使效果更佳。

网站后台

3.5 PC完成效果

网站后台

手机完成效果（手机效果按教程第二步，可设置显示是悬停还是默认的内容）

网站后台