是否要在将鼠标悬停在文本上时使用 页面生成器 Elementor ? 在这个新教程中，我们将向您展示如何做到这一点。
如果您不知道我们今天要谈什么，我们邀请您观看以下视频：
然后，让我们回到为什么我们在这里。
另请参阅以下指南： 如何使用 Elementor 创建组合效果卡
要完成本教程，您需要 Elementor 专业版，因为我们将使用仅此版本支持的自定义 CSS 代码Elementor.
让我们创建一个有 2 列的部分，然后在侧面板中，让我们定义 高度 河畔 最小高度进而 最小高度 让我们点击 VH 并将滑块设置为 100.
在标签中 样式 让我们选择它 背景类型 en cliquant sur 经典，然后修改 钻石颜色 河畔＃F9F9F9
在标签中 先进, 修改所有 内部边距 河畔 25
现在让我们将列宽更改为 40% 对于左列和 60% 对于右列。
在左栏中，让我们删除一个 文本编辑器小部件，然后在其中粘贴一个文本并修改 标题大小 上的文字 标题3.
在标签中 先进, 输入为 内部边距 10-25-10-30 分别为 顶部、右侧、底部和左侧内部边距
在节 背景 标签 先进， 点击 概述，然后选择 背景类型 河畔 经典, 让我们输入 颜色#DFF5FF et 过渡时间 河畔 0.5.
如果我们将鼠标悬停在文本上，我们将有机会在悬停时发现华丽的背景颜色。
现在让我们进入该部分 边界，然后点击 概述，然后选择 继续 为 边框类型 et 让我们停用边界之间的链接 进入 4 为 左边框. 让我们选择颜色 第002章 FA7 并将过渡持续时间添加到 0.5
如果我们再次将鼠标悬停在文本框上，我们将看到一个更加突出的动画，左侧有一个边框。
在节 边框，让我们回到选项卡 正常，让我们选择边框类型 继续，让我们关闭边界之间的绑定，抓取 4 对于左边框并使其非常透明。
如果我们再将鼠标悬停在文本上，我们将看到一个非常平滑的过渡。
另请参阅： 如何使用 Elementor 在图像上方显示文本
让我们复制该文本两次并更改每次的文本 内容 像这样。
在右栏中，拖动一个 图像小部件，并从我们的库中插入一张图片。
我们将通过以下方式在此图像周围创建一个空间 高级选项卡 并为上、右、下和左的所有内部边距输入 10 – 10 – 10 – 50。
让我们选择图像并在选项卡中 先进 后者，让我们进入该部分 动作效果 然后 入口动画， 选择 淡入
让我们进入部分 先进 从高级选项卡并在 CSS 类字段中添加一些类名。 所以让我们得到 全图像 img-1
让我们复制我们的图像 2 次。
让我们选择第二个图像并将 img-1 更改为 img-2，然后将图像更改为新图像。
对于第三张图像，我们只需将 img-1 更改为 img-3，然后将图像更改为新图像。
让我们选择我们的部分并转到其选项卡 先进. 在该部分 自定义CSS，复制并粘贴以下代码段：
selector .all-img{
display: none;
}
selector .img-1{
display: block;
}（如果你没有这个部分，那么你没有专业版，如果你想继续你需要升级你的版本）.
让我们选择我们的第一个文本编辑器并转到高级选项卡和 属性部分. 在该领域 Attributes，复制并粘贴以下代码段：
data-showme|img-1对其他文本编辑器执行此操作，同时将 img-1 更改为 img-2 或 img-3
现在让我们在页面中添加一个 HTML 小部件。 复制并粘贴以下脚本：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
$('[data-showme]').hover( function(){
event.preventDefault();
var showme = $(this).attr('data-showme')
$('.all-img').hide()
$('.' + showme).show()
})
})
</script>
现在保存或更新您的页面，然后进行预览。
好了，您刚刚轻松完成了这项任务。
立即获取Elementor Pro！
结论
就在那里！ 这就是本文的内容，它向您展示了如何在将鼠标悬停在文本上时更改图像。 如果您对如何到达那里有任何疑虑，请告知我们 评论.
但是，您也可以咨询 我们的资源，如果您需要更多的元素来执行创建Internet网站的项目，请参考我们关于 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
