想了解如何为帖子小部件中的项目添加悬停效果Elementor?
如果您是使用 WordPress 的用户 Elementor 创建你的 网站Web，您应该熟悉悬停效果功能。 您主要可以在每个小部件设置中找到此功能 Elementor.
悬停效果可以使您的元素具有吸引力，因此它是改善您的用户体验的有效方法 现场网络.
好吧，说到悬停效果，本文将向您展示如何将后者添加到小部件中的各个帖子元素中 Elementor 使用 Elementor 的自定义 CSS 进行发布，特别是放大悬停效果。
我们为您制作本教程的原因有两个：
- 默认情况下，您可以从 Elementor 帖子小部件向帖子添加悬停效果。 但是，悬停效果将非常基本/标准。
- 默认情况下，Elementor 允许您将拉链效果添加到 Posts 小部件（选项卡 先进 -> 变压器——> 规模）。 但是悬停效果会影响所有（而不是单个）帖子小部件元素。
从 Elementor 的帖子小部件向单个帖子添加悬停效果的步骤
在开始本教程之前，我们想让您知道本教程使用 Elementor 的自定义 CSS 功能。 此功能仅适用于 Elementor临; 确保您已升级您的版本。
第 1 步：添加帖子小部件
转到您的 Elementor 编辑器，我们将从头开始一切，因此创建一个包含单列的部分。
另请参阅： 如何将 MailChimp 与 Elementor 集成
接下来，从小部件面板中选择帖子小部件，然后将其拖放到编辑区域中。 添加帖子小部件后，您可以根据自己的喜好编辑小部件并为其设置样式。
雷马克: 请确保您已经在您的网站上发表过文章 现场网络.
第 2 步：添加 CSS 片段
编辑好帖子小部件并为其设置样式后，接下来我们将通过添加简单的 CSS 片段在单个帖子中添加悬停效果。 在帖子小部件设置中，转到选项卡 先进 –> 自定义CSS. 请复制下面的 CSS 片段，然后将其粘贴到字段中 自定义CSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
上面的代码将使用选择器选择 Posts 小部件上的单个 post 元素 .élémentor-post 并应用 CSS 变换。
如果您对所使用的悬停效果感到满意，您可以保持这种状态并根据需要保存您的项目。 但是，如果您想自定义转换速度和转换比例值，您可以更改 CSS 片段中的值。
雷马克：变换/放大是网站上常用且流行的效果。 如果您想了解更多关于转换悬停效果的其他方法，您可以访问此 页.
发现还： 以下文章中的所有 Elementor 小部件选择器
立即获取 Elementor Pro ！！！
结论
本文向您展示了使用自定义 CSS 为 Elementor 的帖子小部件中的单个帖子元素添加悬停效果是多么容易。
我们用于此效果的技术是（放大），它涉及 2D 和一些伪变换元素。 自定义和使用所有样式的悬停效果，直到找到最适合您网站的悬停效果。
这是！ 我们刚刚向您介绍了最好的工具 市场营销 通过 Elementor 的电子邮件。 如果您对如何使用它们有任何疑问，请告诉我们 评论.
但是，您也可以咨询 我们的资源，如果您需要更多的元素来执行创建Internet网站的项目，请参考我们关于 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
