正如您现在已经知道的那样，Divi 有大量的设计设置，可让您为任何 Divi 元素（部分、行或模块）创建独特的悬停效果。 通常，悬停效果仅与一个元素隔离。 例如，如果您在悬停时向模块添加变换旋转属性，则当悬停在模块上时该旋转将激活。 但是，如果您向包含模块的行添加额外的悬停效果，则在悬停在模块上时会添加另一层悬停效果。 这为一些独特的抽象悬停效果打开了大门。
在本教程中，我们将探索如何使用 Divi 的内置设置转换多个元素以获得抽象悬停效果。 由于我们将在此设计中使用稍微不同的行，因此我将向您展示如何为您的行创建网格布局，以便您可以在画廊中展示这些悬停效果（如果您愿意）。
让我们开始吧。
抢先看
免费下载在悬停布局上转换多个元素
要掌握本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。
让我们来看看教程好吗？
入门
订阅我们的 Youtube 频道
对于本教程，您将需要以下内容：
- Divi 主题已安装并处于活动状态
- 几张图。 我正在使用从 Divi Builder 中访问的预制布局中的图像
准备好后，转到您的 WordPress 仪表板。 然后创建一个新页面（Pages > Add New），给你的页面一个标题，然后部署 Divi Builder。 选择“从头开始构建”选项。
现在你的空白画布等待着！
图像的抽象悬停效果
第一个设计将结合行上的倾斜变换悬停效果和图像模块，为悬停时的图像创建扇形效果。 除了看起来很酷之外，这种效果还可以作为一种有用的 UI 交互，让用户知道通过单击图像，您将看到更多图像。 因此，如果您愿意，可以使用该图像作为您画廊页面的链接。
这是如何做到的。
首先创建一个具有单列行的新常规部分。
然后将图像模块添加到该行。
接下来，添加上传图片到模块。
添加图像模块悬停效果
现在我们可以为图像添加一些变换悬停效果，以缩放旋转和倾斜图像。 为此，请转到转换选项并更新以下内容：
变换比例 X 和 Y 轴：110%
变换旋转Z轴：9度
变换倾斜 X 和 Y 轴：3 度
就是这样！ 很简单。 现在我们需要自定义该行以添加另一个悬停效果，该效果将在悬停在元素上时激活。
行设置
为了使这种设计起作用，行需要与其中的图像大小相同，以便两者的悬停区域相同。 这将允许我们为模块和悬停在模块（或在本例中为图像）上时将激活的行添加不同的悬停效果。 这是有效的，因为悬停在行内的模块上将激活悬停效果，就像悬停在行上时一样。 而且，因为我们在模块上有不同的悬停效果，当悬停在模块上时，两种悬停效果都会激活。 这允许我们使用抽象悬停效果的组合，使用框阴影、变换倾斜和变换旋转到行和模块。
我们已经为我们的图像设置了模块悬停效果，现在我们需要调整行的大小。 根据图像的大小，模块应该已经跨越了行的整个宽度，因此从技术上讲，不需要调整行的宽度。 但是对于这个例子，我将缩小行以便为我们的悬停效果腾出空间。
更新行设置如下：
最大宽度：400px
由于我们希望行的高度与其中的图像匹配，我们需要摆脱默认的顶部和底部填充：
自定义填充：0px 顶部，0px 底部
现在我们需要在行列中添加背景图像。 每当图像模块变换悬停效果倾斜和旋转时，该背景图像就会出现。
第 1 列背景图片： [enter image]
继续在悬停时使用框阴影更新行，如下所示：
盒子阴影：见截图
盒子阴影水平位置：0px（默认），-30px（悬停）
盒子阴影垂直位置：0px（默认），-15px（悬停）
阴影颜色：#002f66
这个盒子阴影添加了出现在行背景图像后面的另一个图像的效果，一旦我们添加了我们的变换悬停效果，它将旋转和倾斜背景图像进入视图。
最后，我们准备添加一个倾斜变换属性来为行添加额外的悬停效果。
变换倾斜 X 和 Y 轴：-3deg
最后结果
这是最终结果。
它也可以在移动设备上很好地扩展。
行动号召的抽象悬停效果（示例 1）
行设置
创建一个具有一列行的新常规部分。
然后按如下方式更新行设置：
第 1 列背景渐变左颜色：rgba(34,43,58,0.71)
第 1 列背景渐变右颜色：#222b3a
背景图片： [insert image]
最大宽度：400px
自定义填充：0px 顶部，0px 底部
我们将回到行设置以完成我们的抽象悬停效果，但现在，让我们将对 Action Module 的调用添加到行中。
号召性用语模块设置
打开行动呼吁模块设置并更新内容如下：
标题：积分旅行
按钮文字：点击这里
内容：限时
按钮链接 URL：#（只是暂时激活按钮）
使用背景颜色：否
然后更新模块的文本和间距的设计设置。
标题字体：Gilda Display
按钮文字大小：16px
按钮文字颜色：#ffb238
按钮背景颜色：rgba(0,0,0,0)
按钮边框宽度：0px
自定义填充：顶部 20%，底部 20%
现在为模块添加边框。
边框宽度：2px
边框颜色：#222b3a
这照顾了我们的默认设计。 现在是有趣的部分了。 请记住，因为我们的行和模块的大小（高度和宽度）基本相同，所以两者的悬停区域将相同。 换句话说，我们添加到行和模块的悬停效果都会在悬停在元素上时激活。 这允许我们使用抽象悬停效果的组合，使用框阴影、变换倾斜和变换旋转到行和模块。
让我们从行悬停效果开始。
行悬停效果
首先，我们可以在悬停时为我们的行添加一个盒子阴影。 打开行设置并更新以下内容：
盒子阴影：见截图
盒子阴影水平位置：0px（默认），90px（悬停）
盒子阴影垂直位置：0px（默认），80px（悬停）
盒子阴影传播强度：0px（默认），-40px（悬停）
阴影颜色：#ffb238
请记住，盒子阴影也将继承我们接下来将添加的变换选项。
现在让我们在悬停时添加一个旋转和倾斜变换属性。
变换旋转X轴（悬停）：10度
变换倾斜 X 轴（悬停）：-4deg
变换倾斜 Y 轴（悬停）：-4deg
这会处理行悬停效果。 现在我们需要将悬停效果添加到将完成设计的号召性用语模块。
号召性用语模块悬停效果
打开号召性用语模块设置，给它一个盒子阴影悬停效果如下：
盒子阴影：见截图
盒子阴影水平位置：0px
盒子阴影垂直位置：0px（默认），30px（悬停）
阴影颜色：#ffffff
最后，在悬停时添加缩放、旋转和倾斜变换属性，如下所示：
变换比例 X 和 Y 轴（悬停）：115%
变换旋转Z轴（悬停）：9度
变换倾斜 X 轴（悬停）：3 度
变换倾斜 Y 轴（悬停）：3 度
在悬停时使用缩放来增加模块的大小将有助于最大限度地减少用户将鼠标悬停在行元素而不是模块上的机会。
最后结果
这是抽象悬停效果的最终结果。 请注意行悬停效果和模块悬停效果如何在悬停时激活以将元素倾斜以进行抽象设计。
这是悬停效果在移动设备上的样子。 但是，由于大多数移动浏览器需要点击才能激活悬停效果，因此您可能希望在移动设备上禁用悬停效果以避免用户在使用模块作为链接时必须双击。
号召性用语的抽象悬停效果（示例 2）
为了快速启动下一个抽象悬停效果的设计，让我们复制包含第一个示例的部分。 现在我们需要做的就是对设计和悬停效果进行一些小的调整，以获得独特的设计。
更新行设置
首先，更新行设置如下：
变换旋转Z轴：-5度
变换倾斜 X 和 Y 轴：-4deg
更新号召性用语模块设置
现在让我们调整模块设置如下：
首先，去掉边界……
边框宽度：0px
然后更新盒子阴影如下：
盒子阴影水平位置：0px
盒子阴影垂直位置：110px
（确保并禁用从您复制的先前设计继承的悬停效果）
阴影颜色：#ffb238
现在我们可以更新我们的变换属性悬停效果。 在这里，我们基本上是稍微减小了比例，并为我们之前的旋转和倾斜变换属性添加了负值，以便在悬停时沿相反方向移动元素。
更新以下转换选项：
变换比例 X 和 Y 轴（悬停）：110%
变换旋转 Z 轴（悬停）：-9deg
变换倾斜 X 轴（悬停）：-3deg
变换倾斜 Y 轴（悬停）：-3deg
为行创建网格布局
因为这种设计要求父行环绕模块并且具有相同的高度和宽度，所以您实际上无法像通常那样创建列布局，但是，您可以使用 flex 属性来对齐您的行在网格布局中水平放置。
为此，首先将包含您的模块的行复制几次，以便在一个部分中有三行。
然后为每一行添加自定义边距：
自定义边距：50px 顶部，50px 底部
然后打开部分设置，只需将以下自定义 CSS 添加到主元素。
display: flex; flex-wrap: wrap;
现在您有三列将根据您的浏览器大小响应的行。
最后的想法
在悬停时转换多个元素确实提供了您可以探索的另一个层次的创造力。 本教程中的示例旨在向您展示什么是可能的，但您可以随意调整您自己项目的设计。 如您所料，如果您愿意，您可以变得非常古怪。 但是你也可以更保守一些来创建一个微妙的交互设计元素，比如本教程中的图像模块示例。
我期待在评论中收到您的来信。
干杯!
