如何通过悬停效果为 WordPress 添加视觉吸引力
WordPress 是高度可定制的，提高网站视觉吸引力的一种方法是添加悬停效果。 这些是当访问者将鼠标悬停在某个元素上时播放的小动画。
这些非常适合在读者滚动页面时吸引他们的注意力。 因此，它们是您想要突出显示的与销售或特殊功能相关的按钮或图像等元素的理想选择。
今天，我将演示如何使用 Hover Effects 插件将悬停动画添加到 WordPress 中的任何元素。
为什么要向 WordPress 添加悬停影响？
悬停效果突出显示页面上的重要元素，如按钮、横幅等。 更重要的是，它们为您网站上的可点击内容提供了一个清晰的标志，这使它们成为任何杂乱页面的绝佳补充。
当然，有时悬停效果实际上可以提供额外的细节。
例如，当您将鼠标悬停在页面或帖子上的链接上时，大多数网站都会让它显示 URL。 虽然这并不华而不实，但它仍然是悬停效果的一个示例。 另一种是在图像上显示替代文本或标题。
因此，无论您只是寻找审美趣味，还是想显示重要信息，悬停效果都非常有用。
如何在 WordPress 中添加悬停效果
第 1 步：安装悬停效果
虽然您可以轻松地使用 CSS 在 WordPress 中添加悬停效果，但许多初学者可能会对此感到困惑。 相反，我建议使用 悬停效果 插入。 这个插件提供了你将要使用的所有 CSS 代码。
因此，您需要做的就是复制副本并将其粘贴到所需块上的附加 CSS 部分。 它使用起来非常简单，让您可以访问 40 种不同的悬停效果，这些效果可在任何 WordPress 块或菜单上使用。
让我们首先单击插件并选择左侧管理面板上的添加新选项。
在可用的搜索框中搜索悬停效果。 这将提取您可能会发现有用的其他插件。
向下滚动，直到找到 Hover Effects 插件，然后单击“立即安装”按钮并激活插件以供使用。
第 2 步：复制效果
正如我所说，您唯一需要做的就是复制和粘贴 CSS 代码，这非常简单。 该插件添加了一个专用页面，您可以在其中查看每个效果的作用并复制必要的代码。
在左侧管理面板上单击 Wow-Company 并选择 Hover Effects 选项。
在顶部，您将看到几个选项。 您当前位于示例选项卡中，其他选项卡包括常见问题解答、支持论坛的链接、评级页面的链接以及他们的 Facebook 页面。
您只需要示例和常见问题解答选项卡。
在这里您可以查看所有悬停样式。 共有三种样式：2D 过渡、阴影和发光过渡以及卷曲。 您需要做的就是将鼠标悬停在效果上以查看效果。
请记住，这些效果可以应用于古腾堡的任何街区。 单击效果以复制 CSS。
笔记： 如果您打算使用多个悬停效果，我建议您在新选项卡中打开此页面。 这样，您只需交换选项卡即可找到要添加的新悬停效果。 这是一个很大的节省时间。
第 3 步：将悬停效果添加到块
转到您网站上要添加悬停效果的任何帖子或页面，或创建一个新的以进行测试。 在那里，单击编辑器中的任何块并展开设置轮。
笔记： 此过程与 WordPress 中的小部件相同。 毕竟，所有小部件都只是块。
单击高级设置。
这些设置包括标题属性、HTML 锚点和附加 CSS 类。 将悬停效果粘贴到 Additional CSS Classes 文本框中。
您无法在编辑器中查看悬停效果。 相反，您可以单击“预览”按钮进行查看，或者保存更改并在实时页面上查看。 同样，这些效果适用于任何方块。
因此，无论您是向图像还是按钮添加悬停效果，这都是相同的过程。 请记住，如果单个按钮有多个悬停效果，请用逗号分隔每条 CSS 行。
第 4 步：将悬停效果添加到菜单
这些按钮效果不仅限于 WordPress 中的块，它们还可以应用于菜单以帮助它们更加突出。 然而，默认情况下，CSS 类是不启用的，所以首先我们需要打开它们。
单击外观并选择菜单选项。
单击右上角的屏幕选项。
选中 CSS Classes 框以在菜单项上启用 CSS。
这将允许您将自定义 CSS 添加到任何菜单项，但关键是它适用于单个元素。 您不能一次将效果添加到每个项目。 因此，如果这是您的目标，您将需要分别为每个菜单项添加悬停效果。
展开任何菜单项，并将悬停效果粘贴到 CSS 类框中。
保存更改，您的菜单现在将具有悬停效果。 恭喜您在 WordPress 中设置了悬停效果插件。
悬停效果会影响网站性能吗？
在大多数情况下，悬停效果不会对网站性能产生任何影响。 但是，如果您将悬停动画添加到特定元素，它有时会减慢用户的页面速度。
例如，假设您有一个非常大的图像。 如果您决定为其添加旋转悬停效果，那可能会变得混乱。 不建议移动这样的大文件。
坦率地说，这是一个糟糕的设计。 要考虑的另一件事是移动用户。
虽然智能手机已经变得非常强大，但并不是每个人都在使用最新型号。 这些动画可能会导致不符合标准的设备出现问题。 这就是为什么许多网站实际上禁用了移动设备的悬停效果。
不要过度使用悬停效果
在 WordPress 中添加悬停时的 CSS 动画是为您的网站添加一点活力的好方法。 然而，就像现实生活中有太多闪光这样的事情一样，你可以有太多的动画效果。
对于一些访客来说，这可能会显得俗气或业余。 只使用一些效果，并尝试在相同类型的对象上使用它们。 最重要的是，尽量避免花哨的。 没有人希望看到“立即购买”按钮进行滚桶操作。
您在您的网站上使用哪些类型的悬停动画？ 您将悬停效果添加到哪些页面元素？
