哈喽大家好，我是Russell。最近在给客户建站的过程当中，我们其中有一个定制建站项目，这位老板对其中一个功能非常感兴趣，类似于一个切换的功能。如下：
大概的逻辑就是当鼠标悬浮到其中的一个模块，上面会悬浮文字，并且会切换到对应的图片。大家可能会认为只需要安装一个插件就可以解决了，但是在插件商城里面，我是没有找到能实现这个功能的插件，有相似的但是插件太大，非常影响网站的加载速度。Wordpress好就好在了它是开源系统，我们可以利用Css、Js等代码来实现自己想要的功能，接下来我就给大家来演示一下，如何制作这样的功能。这里我们只需要利用Elementor 和它pro版本就可以了。
01 建立整体框架样式
首先利用Elementor做一个横向排列的容器，如果你想要全屏的，那就给这个容器设置成全宽度。建好这个大的容器之后，需要再拖进去一个容器，包含在这个大的容器里面。
接下来我们给容器设置一个背景图片。这里一定要注意，要选择里面新添加进去的容器，设置背景图片。
上传好图片之后，同时给这个容器设置一个高度，把里面的图像撑开。同时可以给背景加一层悬停黑色遮罩，颜色对比度强一点。
接下来，我们需要给这个容器里面，再添加多个容器。然后把这个容器的内部排列方向设置为横向。
然后我们再在这个新添加的容器里面，再去添加四个容器，横向排列。
下面我们需要往刚添加的这四个容器中，分别添加元素。比如：标题、描述、按钮。直接在左侧边栏拖拽进来就行，同时调整一下它们的样式，比如颜色、字体大小、容器内边距等，这里我就不去一一演示了，添加调整后的样式如下：
这里，我们还要进行一下样式的调整，给每个模块，添加一个边框，类似于有个分割线的样式。也非常简单，选中其中的一个容器，再样式里面找到边框，宽度设置为2，颜色为白色，在调整一下颜色的不透明度。
设置完边框之后，样式如下。
以上我们基础的框架部分就已经做好了，接下来就要做它的动效和功能了。上面这些都是比较基础的，一般会用Elementor的都可以做出来。
02 设置文字悬浮滑动样式
接下来，我们需要做一下，当鼠标悬浮到其中的一个容器上，描述及按钮部分，从下往上滑动的效果。首选选择我们的第二层容器，如果大家找到不到的话，右击点击结构，就可以看到了。
我们的这个模块，一共有三层的容器，这里一定要选对，第二个容器。然后再这个容器的的高级设置里面，找到Custom Css，把代码复制到里面：
现在悬浮的效果还是没有展现出来，我们需要把这四个容器进行关联，在代码里面找到single-card，复制。分别粘贴到这四个容器的CSS类里面。
四个边框全部都输入之后，就会得到关联了，鼠标悬浮的效果就会出现了。
03 添加背景切换功能
接下来我们需要添加，当鼠标悬浮在不同的容器上，背景也随之切换功能。同样也是需要代码来实现。首先同样选择我们第二个容器，编辑容器，在Css类这里，输入main-parent。
接下来，我们需要在这个模块下方，新添加一个容器，并且添加一个HTML元素。
然后将下面的代码放到HTML这个元素里面。
这里同样需要对这四个容器进行关联，代码当中有下面红框当中的单词，card-one、card-two、card-three
将三个单词从左到右，分别粘贴到前三个容器的高级设置，CSS ID里面。
接下来只需要把代码中的图片链接替换成自己的就可以了，替换方式非常简单，在媒体库里找到需要替换的图片，复制链接。替换到下方代码中花红框的位置。
还有最后一步，就是给这四个容器添加一个背景覆盖颜色，选中对应的容器，点击样式，在背景覆盖里面，选择悬停。这里可以将颜色设置为黑色，同时可以调整下不透明度。
04 总结
以上设置完成后，不要忘记点击发布，然后刷新下页面，因为代码加载可能需要时间。预览效果如下：
本次教程难度相对较大，如果对Elementor不熟悉的话，操作起来确实有点困难。如果做不了的话可以直接私信我，直接发给你模板，导入到自己网站就可以了。
来源公众号： Russell的数字营销课堂（ID：KuajingRussell）专注分享谷歌广告、SEO、建站等干货教程。
本文由 @Russell数字营销课堂 原创发布于奇赞平台，未经许可，禁止转载、采集。
该文观点仅代表作者本人，奇赞平台仅提供信息存储空间服务。
