如何使用 Elementor 在悬停效果上添加徽标交换

Muneeb WordPress Tutorials Mar 1, 2022

我们都知道Elementor Website Builder是如何实现无限定制的。 通过这种定制,我们可以增强用户体验并在我们创造的东西中发挥创造力。

悬停效果上的徽标交换是当用户将光标放在您网站上的徽标上时,它会自动更改其细节,即颜色、形状或轮廓。 在本教程中,我们将了解如何使用Elementor在悬停效果上创建徽标交换。

如何使用 Elementor 在悬停效果上创建徽标交换

您已经知道效果是什么,并且对您想要创建的内容有想法,让我们继续前进,看看如何。

首先,为小部件添加一个内部部分

创建令人惊叹的网站

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

现在开始

接下来,您需要在最初创建的部分中添加一 对于本教程,我们将使用两列结构

然后将图像小部件拖放到您创建的列中。

为了使效果生效,您将需要两张图片。 一个正常显示,另一个在用户放置光标时显示。

您可以使用同一徽标的两种变体或使用两张完全不同的图片,可能性是无限的。

选择图像后,在自定义 CSS字段中粘贴以下 CSS 代码,以使悬停效果上的徽标交换生效。

selector img:hover{
    content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
  opacity: .50;
  transition-duration: 3s;
 }

并做了! 发布您的页面以预览并查看效果在您的网站上的外观。 如果您愿意,可以回来进行任何更改。

这就是您如何使用Elementor创建悬停时徽标交换效果的方法。 请务必在我们的FacebookTwitter上加入我们,以随时了解我们的帖子。

Divi WordPress Theme