NIUCLOUD是一款SaaS管理后台框架多应用插件+云编译。上千名开发者、服务商正在积极拥抱开发者生态。欢迎开发者们免费入驻。一起助力发展! 广告
悬停盒子 功能作用 * 实现页面鼠标移入带来的动态交互效果。 实现效果 ![](http://cdn.img-sys.com/comdata/16311/201904/20190403094910270164.gif) 一、模块设置 * 路径:编辑页面——添加模块——悬停盒子——拖到页面合适位置 **![](http://cdn.img-sys.com/comdata/16311/201904/20190403110942787bb9.png)** * 选择鼠标移入的切换效果及手机显示端。 ![](http://cdn.img-sys.com/comdata/16311/201904/20190403094841fc754e.png) * 保存后,鼠标移到模块右上角会显示两个标签,默认跟悬停。鼠标点击切换两个区,分别添加模块到两个区的盒子内容区,即可。(默认区是页面默认显示的内容,悬停区是鼠标移入显示的内容) **![](http://cdn.img-sys.com/comdata/16311/201904/2019040309484117ec4b.png)** 二、使用方法 * 2.1 以上述动态图为例,先把默认的图片模块添加到默认区域 ![](http://cdn.img-sys.com/comdata/16311/201904/20190403094841e79a68.png) * 2.2 点击模块上方悬停切换到悬停,再把图文模块及文本模块添加到悬停内容区 ![](http://cdn.img-sys.com/comdata/16311/201904/2019040309484171191e.png) * 2.3 鼠标移至悬停盒子的样式编辑,调整悬停的背景为黑色,把透明度调为一半左右,有磨砂透明效果 (可根据喜好调整) ![](http://cdn.img-sys.com/comdata/16311/201904/2019040309484160e0e1.png) * 2.4 细节调整二维码及文字的模块内边距,使效果更佳。 ![](http://cdn.img-sys.com/comdata/16311/201904/20190403094841d8bbde.png) * 2.5  PC完成效果 ![](http://cdn.img-sys.com/comdata/16311/201904/201904030958322f5c80.gif) *  手机完成效果 (手机效果按教程第二步,可设置显示是悬停还是默认的内容) ![](http://cdn.img-sys.com/comdata/16311/201904/2019040309484174dcc3.png)