如何同时触发模块、列和行的悬停效果

使用 Divi 构建站点的最好的事情之一是每个构建块都包含设计选项。 每个模块、列、行和部分都包含默认和悬停状态的设计设置。 这为将这些元素组合在一起时触发多个悬停效果打开了大门。

在本教程中，我将向您展示如何同时触发模块、列和行的悬停效果。 诀窍是确保所有元素共享相同的大小和悬停空间。 但是，一旦您准备好元素，您的悬停效果和设计就会变得极具创意。

让我们开始吧。

抢先看

这是一个快速示例，说明如何同时触发不同 Divi 元素的悬停效果。

免费下载设计实例

要从本教程中着手设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

订阅我们的 YouTube 频道

让我们进入教程，好吗？

了解如何同时在多个 Divi 元素上触发悬停状态。

Divi 中的每个元素（部分、行或模块）都有自己的悬停空间，这基本上是元素本身的大小。

这些元素中的每一个都有内置的悬停选项，当悬停在该元素或其包含的任何子元素上时会激活这些选项。

因此，例如，如果您向某个部分添加了悬停选项，则只要您将鼠标悬停在该部分上，这些悬停选项就会变为活动状态。

然后，如果您将鼠标悬停在该部分内的行悬停空间上，您将同时激活该行和该部分的悬停选项。 这是因为该行是该部分的子元素。

每当您将鼠标悬停在列上时，就会激活列、行和节的悬停状态。

最后，每当您将鼠标悬停在模块上时，就会触发该模块及其所有父元素（列、行和节）的悬停状态。

默认情况下，这些元素中的每一个都有间距（填充），在悬停空间中创建间隙，允许用户有选择地悬停每个元素。 但是，如果您去掉每个元素之间的间距，您将能够同时触发所有元素的悬停状态。

这为许多悬停效果组合打开了大门，当您组合每个元素的悬停选项并在共享悬停空间激活它们时，这些组合可以同时发生。

组合悬停效果的示例

这是一个如何与 Divi 配合使用的示例。

在下面的示例中，我们有一行带有背景图像。 在悬停时，我们有一个延迟的框阴影，它显示为一种边框设计元素。

在行内，我们有一列填充了黑框阴影。 悬停时，列的框阴影逐渐减小以显示行背景图像。

在列内，我们有一个蓝色背景的模糊模块。 悬停时，蓝色背景会更改为半透明的蓝色，以便您可以看到背景图像。

由于每个元素之间都有间距，当我们将鼠标悬停在每个单独的悬停空间上时，我们可以看到每个元素的特定悬停效果。

但是，如果我们去掉间距并给行一个自定义宽度，所有元素将共享相同的悬停空间。 或者换句话说，模块占据了列和行的整个空间。 所以当我们将鼠标悬停在模块上时，模块、列和行的悬停效果会同时激活。

过渡延迟非常适合此设置

请记住，在上面的示例中，行和列悬停效果存在过渡延迟，这确实很好地突出了此概念的功能。 如果我们试图仅向模块添加类似的悬停效果组合，我们将无法分别对每个悬停效果应用不同的过渡延迟和持续时间。

在 Divi 中重新创建设计示例

为了向您说明这在 Divi 的现实世界中如何发挥作用，让我们重新创建上述示例。

你需要什么开始

首先，您需要具备以下条件：

1. 已安装并激活 Divi 主题
2. 在前端从头开始构建的新页面（可视化构建器）
3. 用于模拟内容的图像

之后，您将有一个空白画布开始在 Divi 中进行设计。

添加节和行

您需要做的第一件事是创建一个具有一列行的常规部分。

更新行和列设置

接下来，打开行设置并为该行设置背景图像。

然后我们需要去掉默认的padding，这样行和列之间的悬停空间就没有间隙了。

• 填充：0px 顶部，0px 底部

然后将以下框阴影添加到悬停时的行中。

• 盒子阴影：见截图
• 框阴影模糊强度：0px
• 框阴影传播强度：0px（桌面），10px（悬停）
• 阴影颜色：#063c68

接下来更新具有持续时间和延迟的转换选项，如下所示：

• 转换持续时间：500ms
• 转换延迟：700ms

现在打开列设置并更新以下内容：

• 盒子阴影：见截图
• 框阴影模糊强度：0px
• 框阴影传播强度：200px（桌面），0px（悬停）
• 阴影颜色：#000000
• 转换持续时间：500ms
• 转换延迟：200ms

添加模糊模块

现在向该行添加一个模糊模块。

然后按如下方式更新简介：

• 图片：[插入简介图片]
• 背景颜色：#0c71c3
• 背景颜色（悬停）：rgba(12,113,195,0.35)

• 文本对齐：居中
• 文字颜色：浅
• 填充：顶部 20 像素，底部 20 像素，左侧 20 像素，右侧 20 像素

最后结果

查看最终结果。

最后的想法和提示

了解如何同时触发多个 Divi 元素的悬停状态开启了一些令人兴奋的设计可能性。 这篇文章中的示例仅突出显示了在组合模块、列和行的悬停状态时可能出现的多种悬停效果组合中的一些。 另外，我们甚至没有探索组合部分悬停选项所带来的可能性，这将为您提供更多悬停选项。 当您自己探索这些悬停效果时，这里有一些提示和想法可以帮助您。

• 使用 Box Shadow 而不是 Borders - Borders 实际上为元素增加了额外的空间，因此这可能会导致不必要的悬停间隙。 Box Shadows 添加了一个不会增加实际空间的设计元素。
• 探索背景过渡悬停效果——每个 Divi 元素都有背景悬停选项，可以组合为创意悬停效果层。
• 使用变换悬停选项 - 变换悬停选项可以添加创意元素，例如悬停时缩放和旋转元素。 但是，在悬停时旋转多个元素可能具有挑战性，因为它会导致跳跃。
• 利用过渡选项——在每个元素的悬停状态上添加不同的过渡持续时间和延迟可以创建独特的悬停动画。

我希望本教程能激发您探索 Divi 中一些惊人的悬停效果组合。

我期待在评论中收到您的来信。

干杯!