您想通过单击按钮更改图像吗？ 页面生成器 Elementor ? 在这个新教程中，我们将向您展示如何做到这一点。

如果您不知道我们今天要谈什么，我们邀请您观看以下视频：

然后，让我们回到为什么我们在这里。

另请参阅： 如何使用 Elementor 将鼠标悬停在文本上时更改图像

要完成本教程，您需要 Elementor 专业版，因为我们将使用仅此版本支持的自定义 CSS 代码Elementor.

让我们创建一个有 2 列的部分，然后在侧面板中，让我们定义 高度 河畔 最小高度进而 最小高度 让我们点击 VH 并将滑块设置为 100.

让我们将 Image 小部件拖到左列并从我们的库中插入一个图像。

在右栏中，让我们插入一个 标题小部件 标题为选择最好的。 在选项卡中 样式 让我们点击 活版印刷 并修改 1 处的行高.

另见： 如何更改图像ge 使用 Elementor 将鼠标悬停在文本上

让我们在 Title 小部件下方添加一个 文本编辑器小部件.

在标题小部件上方，让我们将分隔符小部件放入其选项卡中 包装内容，让我们抓住 270 为宽度。 让我们点击添加元素的文本，然后输入 趋势 作为文本。 在选项卡中 样式，修改润滑脂和 差距 河畔 2.

发现还： 如何使用 Elementor 在图像上方显示文本

在文本部分，单击 活版印刷，让我们改变字体， 尺寸 河畔 18的， 油脂 河畔 600.

在编辑器小部件下方 内容，让我们归档一个 内部部分, 删除内部部分的一列并在后者中放入 按钮小部件

让我们通过转到侧面板和选项卡来修改按钮 包装内容， 点击 图标库 河畔 图标 并插入图标 购物袋，让我们也清除一下按钮上的内容 文本

让我们去标签 样式 按钮和在 边界半径， 点击 % 并抓住 50 对于所有路缘半径和 内部边距，让我们抓住 20.

让我们通过单击更改后者的颜色来自定义按钮的颜色 经典 为 背景类型 让我们根据图像上的突出显示颜色更改颜色。

然后点击选项卡 先进 我们的按钮，然后打开 定位 和 宽度 让我们选择 内联（自动）. 在高级部分进阶标签，让我们抓住 10 为 右边距.

让我们复制这个按钮 4 次并修改这些按钮的颜色。

接下来，让我们复制我们的 Image 小部件 4 次，然后修改它们的图像。

在L'高级选项卡，让我们抓住 所有图片 在该领域 CSS 类 我们的每一个图像。

然后在场上 CSS ID 为带有红色突出显示的图像输入 red-image，为带有绿色突出显示的图像输入 green-image，为带有棕色突出显示的图像输入 brown-image，依此类推。

让我们选择我们的 部分 并在进阶标签， 在该领域 定制版 CSS 复制并粘贴以下代码片段：

.all-images{
    display: none;
}
#red-image{
    display: block;
}

(如果您没有此部分，则说明您没有 Pro 版本，如果您想继续，则需要升级您的版本）

接下来，让我们将一个 HTML 小部件拖放到我们的页面中，将以下代码片段复制并粘贴到 HTML 代码部分：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

让我们在字段中选择第一个按钮 自定义属性 德拉 属性部分，复制并粘贴以下代码段：

data-showme|IMAGE-ID-NAME

让我们通过按钮的 ID 修改 IMAGE-ID-NAME 部分，这些是红色图像、绿色图像和蓝色图像 ID，等等。

因此，对于每个按钮，让我们将 IMAGE-ID-NAME 代码更改为相应按钮的颜色

在测试您的按钮时，更新您的工作并在台式机、平板电脑和智能手机模式下进行预览。

例如，在智能手机模式下，您可以将按钮居中对齐、缩小边距等等。

好了，您刚刚轻松完成了这项任务。

立即获取Elementor Pro！

结论

就在那里！ 这就是本文的内容，它向您展示了如何在将鼠标悬停在文本上时更改图像。 如果您对如何到达那里有任何疑虑，请告知我们 评论.

但是，您也可以咨询 我们的资源，如果您需要更多的元素来执行创建Internet网站的项目，请参考我们关于 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.

但与此同时， 在您不同的社交网络上分享此文章.

...