在悬停时显示模块内容可以带来一些有用的好处。 1) 这可能是让您的网页最初设计更紧凑或更优雅的好方法。 2）节省空间。 3）它可以吸引用户与您的页面进行交互。 4）看起来很酷:)。 基本思想是只显示模块内容的一部分（如预告片），这使得访问者将鼠标悬停在上面以查看更多内容。 一旦他们将鼠标悬停在模块上，整个内容就会以平滑的悬停效果显示出来，就像快门一样打开和关闭。
在本教程中，我将向您展示如何使用 Divi 构建器以快门式悬停效果显示模块内容。
抢先看
以下是我们将共同构建的快速浏览。
入门
订阅我们的 Youtube 频道
首先，创建一个新页面，给你页面一个标题，然后部署 Divi Builder 以在前端构建。 选择“选择预制布局”选项。 然后从 Divi Library 弹出窗口中，选择 Day Spa Layout 包并单击以使用 Landing Page Layout。
一旦布局加载到页面上，您就可以开始了！
在 Blurb 的顶部和底部添加分隔线
向下滚动页面到标题为“豪华水疗体验”的部分，其中包含四个简介。 我们将使用带有四个简介的行来启动设计。
添加第一个除法器
我们的第一步是在简介模块上方和下方添加分隔线，以便将我们的简介内容隐藏在后面。 您可以将这些分隔器想象成在悬停时打开和关闭的窗户的百叶窗。
在第一列的简介上方添加一个分隔模块并更新以下内容：
背景颜色：#ffffff
颜色（分隔线）：#ffffff
分隔线重量：100px
高度：100 像素
自定义边距：0px 底部
白色背景与我们部分的背景相匹配，因为我们不想看到它。 确保分隔器的重量和高度相同。
添加第二个（橙色）分隔线
接下来，直接在您刚刚创建的分隔线下创建另一个分隔线并更新以下内容：
颜色：#ff7a6b
分隔线重量：2px
高度：2px
自定义边距：0px 底部
然后跳转到内容选项卡，并给分隔线一个管理标签“橙色分隔线”。 当我们使用线框模式将分隔线复制并粘贴到其他列中时，这将有助于区分分隔线和之前的（白色）分隔线。
保存您的页面。
复制和粘贴 Blurbs 周围的分隔线
现在我们准备在每列中的每个简介的上方和下方复制并粘贴我们的分隔线。 为了使这个过程更容易一点，通过打开页面底部的设置菜单并单击线框图标来部署线框模式。 （或使用 shft + w）
在线框模式下，找到包含我们刚刚创建的简介和分隔线的行。 然后复制并粘贴每个简介上方和下方的分隔线和橙色分隔线，使最终结果看起来像这样。
接下来，返回桌面视图 (shft + w) 以完成设计。 你的页面应该是这样的。
自定义模糊模块
现在您已经准备好所有的分隔线，是时候编辑我们的简介模块了，其中包含一些样式调整，包括自定义边距以创建快门样式悬停效果。
首先，使用多选选择所有四个简介模块。 为此，只需按住 ctrl（或 cmd）并单击每个模块。 然后打开其中一个模块的设置以部署元素设置模式。
在内容选项卡下，添加几行模拟内容。
然后完全禁用图像框阴影。
要创建快门悬停效果，我们需要添加负的顶部和底部边距以默认隐藏分隔线后面的内容。 然后我们将边距设置为 0px 以在悬停时显示内容。 为此，请添加以下间距。
自定义边距（默认）：-100px 顶部，-65px 底部
自定义边距（悬停）：0px 顶部，0px 底部
自定义填充（悬停）：10px 顶部，10px 底部
您可能需要根据您拥有的内容量调整负边距值。 例如，您可能需要为较长的文本内容设置更多的负边距。
现在看看到目前为止的结果。
请注意，每个模块的顶部和底部都隐藏在分隔线后面，直到您将鼠标悬停在它们上方。
清理快门悬停效果
垂直居中模块
目前，快门悬停效果会在每次悬停时将其余内容向下推到页面下方。 这会导致一些可能分散注意力的页面移动。 另外，悬停动作只会向下进行，这不是真正的快门效果。 我们希望内容从中心向上和向下打开。 为此，我们需要执行以下操作：
打开行设置并均衡列高。
然后转到高级选项卡并在主元素下输入以下自定义 CSS：
align-items: center;
这将确保模块在柱内保持垂直居中，为我们提供向上和向下的快门效果。
给行一个固定的高度
为了阻止悬停效果下推下面的页面内容，我们需要阻止行在每次悬停时增加高度。 为此，我们必须为桌面上的行设置一个固定高度。 因为高度是固定的，所以您需要确保行的高度足够高，以适应悬停状态下的宣传内容的高度。 但是，您不想让它太高，因为您会在模块上方和下方留下太多空白空间。 在此示例中，我将行高设置为 600 像素。 但是，由于我们只希望在桌面上设置固定高度，我们需要使用媒体查询将一些 CSS 添加到我们的页面设置中。
这是您需要做的。
首先，在行设置中，给你的行一个 CSS ID：
CSS ID：固定高度
然后打开页面设置（在高级选项卡下）并添加以下自定义 CSS：
@media (min-width: 980px) {
#fixed-height {
height: 600px;
}
}
这使您的行在桌面上具有 600 像素的固定高度，并阻止悬停效果将页面内容的其余部分向下推。
就是这样！
最终结果
查看最终设计。
这是快门悬停效果。
在移动设备上禁用悬停效果可能是个好主意。 为此，您需要做的就是为每个简介模块设置自定义边距，如下所示：
自定义边距（平板电脑）：0px 顶部，0px 底部
最后的想法
这种快门悬停效果是一种创造性的方式，可以让您的观众寻找有关您的不同服务的更多信息。 借助 Divi 的魔力和一些 CSS 片段，最终的结果非常优雅。 我相信这种快门悬停效果还有更多应用，因为您可以使用任何您想要的模块。 随意探索您自己的一些令人兴奋的新设计，并毫不犹豫地与我们分享。 我期待在评论中收到您的来信。
干杯!
