如何在悬停时更改英雄的背景图像（使用 CSS）

Elementor是顶级的 WordPress 网站构建工具，允许网页设计师使用直观的视觉构建器创建专业的、像素完美的网站。 Elementor包含更改网站上任何部分或列的背景图片的选项，包括英雄部分，这是访问者登陆您的页面时首先看到的内容。

什么是英雄形象

英雄图像是一个巨大的网页横幅图像，固定在网页的标题部分，通常位于页面顶部附近。它通常包括图像和文本来表达公司的主要信息。在首屏上方，英雄照片通常包含号召性用语 (CTA)，鼓励访问者探索页面的其余部分。该图形的目的是为页面提供活力和兴奋感，同时给人留下良好的第一印象。

如何更改悬停时的英雄背景图像

在这篇博文中，我将向您展示如何使用 Elementor 的动态标签和自定义 CSS 来更改英雄悬停时的背景图片。这将产生巨大的影响，吸引访问者的注意力并使您的网站脱颖而出。

第 1 步：创建一个新页面

我们需要做的第一件事是创建一个新页面并使用Elementor对其进行编辑。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

插入具有以下设置的部分：

最小高度：100vh
宽度：100%

为名为“image-hover”的部分设置一个类

继续并上传您将用于媒体库中的悬停效果的图像。

完成后，继续插入以下 CSS 代码：

.image-hover [class*="slide"]:hover {
    background-color: #CE3A3AA1 !important;
}
.image-hover:has(.slide1:hover) {
    background-image: url(https://test.positivevibesmedia.com/wp-content/uploads/2021/05/gallery-2.jpg) !important;
}


.image-hover:has(.slide2:hover) {
    background-image: url(https://test.positivevibesmedia.com/wp-content/uploads/2021/05/gallery-1.jpg) !important;
}


.image-hover:has(.slide3:hover) {
    background-image: url(https://test.positivevibesmedia.com/wp-content/uploads/2021/05/cta-img.jpg) !important;
}

注意：将背景图像 URL 替换为媒体库中的图像 URL。

这个 CSS 实现了两个目标：

1 - 更改悬停时每个容器的背景颜色。

2 - 当鼠标悬停在 .slide-* 容器上时，它会更改 .image-hover 中的背景图像。