制作悬停背景图片切换效果 适用于Elementor(含V4)和古腾堡

昨天看到一个悬停背景图片切换效果的教程，如上图这样，鼠标放到那个框框上就切换为对应的背景图片。但感觉看到的这个教程复杂了一些，又是CSS又是JS的，于是我自己折腾了一会，用CSS算基本实现了，这个方法适用于Elementor编辑器（含V4 Atomic编辑器）和古腾堡编辑器。接下来分享介绍。

CSS代码

本教程要用到的CSS代码如下，大家可以把它用到elementor编辑器或古腾堡编辑器中，里面的一些参数值可以自行按需修改。

/* 设置主容器 */
.main-bg-box {
  position: relative !important;
  overflow: hidden !important;
}

/* 背景层 渐变遮罩 */
.main-bg-box::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: all 1.5s ease !important;
  z-index: 0 !important;
}


/* 半透明黑色遮罩 */
.main-bg-box::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.4) !important;
  
  z-index: 1 !important;
  pointer-events: none !important;
}

.main-bg-box > * {
  position: relative !important;
  z-index: 10 !important;
}

/* 默认显示图 */
.main-bg-box::before {
  background-image: url('默认图url，可以和图1一样，或另外设置');
}

/* 悬停切换对应图片 */
.main-bg-box:has(.hover-item-1:hover)::before {
  background-image: url('图1 url');
}
.main-bg-box:has(.hover-item-2:hover)::before {
  background-image: url('图2 url');
}
.main-bg-box:has(.hover-item-3:hover)::before {
  background-image: url('图3 url');
}
.main-bg-box:has(.hover-item-4:hover)::before {
  background-image: url('图4 url');
}

重点：以上代码中main-bg-box作为主容器的CSS类，hover-item-1、hover-item-2、hover-item-3、hover-item-4作为子容器的CSS类。

Elementor实现

接下来先介绍使用默认的Elementor容器元素来实现

步骤一：容器和模块搭建

以最上面首图为例，参照这个样式来制作，即添加一个主容器，里面再添加4个子容器，设置好横向排列，然后分别在里面添加内容，参考案例中我是使用了自带的Flip Box模块，你也可以使用其它。

步骤二：设置容器的CSS类

选中主容器(即最顶层那一个)，打开【高级设置-CSS类】填写上面的main-bg-box类。然后分别选中下面的4个子容器，分别设置CSS类为hover-item-1、hover-item-2、hover-item-3、hover-item-4。

步骤二：粘贴CSS代码

把上面的CSS代码全部复制，粘贴到网站的自定义CSS中，也可以添加Elementor的页面自定义CSS中，如上图所示。然后上传需要显示的背景图片，分别把图片URL粘贴CSS代码中URL部分。

然后就可以看到效果了，大概如上面的动图所示。

接下来再介绍V4 Atomic编辑器如何实现。

步骤一：容器和模块搭建

添加V4原子化元素中的Flexbox (弹性盒)，然后设置横向排列，它里面再添加4个元子化元素Flexbox (弹性盒)，然后子容器的内容就按需设置了，可以就用Flip Box，也可以用其它。

步骤二：设置容器的CSS类

Elementor V4原子化元素的的CSS类设置有一些不同。如上层所示产，先选中最顶层的容器，打开【样式】，在类别集中直接输入main-bg-box，然后其它4个子容器同样的方式再分别设置为hover-item-1、hover-item-2、hover-item-3、hover-item-4。

步骤三：粘贴CSS代码

接下来的操作就和之前的一样了，粘贴CSS代码，填写图片URL，然后就可以看到效果了。

古腾堡实现

如果使用古腾堡编辑器，可以用自带的模块，也可以配合第3方增强插件来实现。操作方式其实与Elementor相通的，这里我就只简单讲一下了。

步骤一：容器和模块搭建

这里我以Greenshift增强插件为例。添加一个Row/Columns Advanced（类似于elementor的容器），设置一个默认的4列预设，然后每个子模块中按需添加内容。这里就自由发挥制作吧。

步骤二：设置容器的CSS类

选中Row/Columns Advanced顶层，然后在【Advanceds-高级-额外的 CSS 类】中填写main-bg-box，接下来依次选中里面的分栏，分别设置在【Advanceds-高级-额外的 CSS 类】中填写hover-item-1、hover-item-2、hover-item-3、hover-item-4。

步骤三：粘贴CSS代码

打开wordpress网站后台【主题-外观-自定义-额外 CSS】，把上面的CSS代码粘贴进去，然后代码中url位置填写你的图片url，然后发布。

做出的效果参考上图所示（我这里只随便加了两个），大家可以根据自己的wordpress建站项目需求自行调整。

总结

以上方法理论上可以适用于任何网站，大家也可以在此基础上进一步修改，比如你需要更多图片切换，那就可以依次往后定义hover-item-5或更多。类似的效果我记得也有手的可以实现，但具体是哪个忘记了，大家也可以去找找看，怎么方便怎么用吧。其实这种效果也不是非要不可，如非必要，我个人认为是不必折腾的哦。