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

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

悬停效果上的徽标交换是当用户将光标放在您网站上的徽标上时，它会自动更改其细节，即颜色、形状或轮廓。 在本教程中，我们将了解如何使用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创建悬停时徽标交换效果的方法。 请务必在我们的Facebook和Twitter上加入我们，以随时了解我们的帖子。