想知道如何在鼠标悬停时显示文章片段 Divi ?
在悬停时预览博客文章片段可以是保持博客文章紧凑网格布局而不完全放弃这些片段的有效方法。
因此，这个想法是最初隐藏片段，然后在您将鼠标悬停在网格中的帖子上时显示它们。 因此，它允许读者查看更多帖子，同时也让他们能够查看他们感兴趣的帖子片段。
因此，在本教程中，我们将向您展示如何在悬停时创建此博客文章片段切换效果 Divi.
让我们开始吧！
概观
首先，这是我们将在本教程中创建的内容的概述。
创建博客模块布局
首先，我们需要为我们的博客文章创建一个基本布局。 对于本教程，我们将在列中添加一行并将博客模块插入其中。
创建一条线
首先，在该部分中插入一行一列
行宽
然后进入线路设置。 然后，在“样式”选项卡中的“尺寸”下，按如下方式修改宽度：
- 最大宽度：90%
- 最大宽度：1200px
添加博客模块
然后，在先前创建的行的列中插入一个博客模块。
博客模块设置
然后，转到博客模块设置，在选项卡中 包装内容，在“元素”下，将“显示阅读更多按钮”选项设置为“是”
现在转到样式选项卡，在模板下，选择“网格”模板作为博客的布局。
最后，转到 Advanced 选项卡并添加以下 CSS 类：
CSS 类：切换博客摘录
随后，我们将在下一步中使用这个类作为我们自定义 CSS 代码的选择器。
使用代码模块添加自定义 CSS。
此时，我们的博客文章以网格布局，并且自定义 CSS 类已添加到博客菜单中。 因此，我们将使用这个 CSS 类选择器专门针对这个博客模块，并在将鼠标悬停在文章上时添加切换效果。
要添加 CSS，我们将使用 Code 模块。 为此，请在博客模块下添加一个代码模块。
接下来，粘贴以下自定义 CSS，以在悬停时创建文章片段切换效果。 最重要的是，确保在必要的样式标签之间粘贴 CSS 代码。
@mediaalland (min-width:981px) {/* add transition for post content*/.toggle-blog-excerpt .et_pb_post .post-content {-webkit-transition:all500ms!important;transition:all500ms!important;}/* keep post content visible in visual builder */body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {visibility:visible;opacity:1;max-height:none;}/* hide post content */.toggle-blog-excerpt .et_pb_post .post-content {visibility:hidden;opacity:0;max-height:0px;}/* show post content when hovering over post item */.toggle-blog-excerpt .et_pb_post:hover .post-content {visibility:visible;opacity:1;max-height:500px;}/* set min-height for all post items */.toggle-blog-excerpt .et_pb_post {min-height:400px;}}
让我们看看到目前为止获得的结果。
结果
让我们使用 Divi 构建器为博客模块添加一些额外的样式
现在 CSS 已经到位，可以为我们的博客文章片段提供切换效果，然后我们可以使用构造函数向博客模块添加任何其他样式 Divi.
对于此示例，我们将对样式进行最小的调整，但也可以随意探索您自己的样式。
文章标题样式
- 昏暗的灯光标题：粗体字
- 标题文字颜色：#6D6A7E
- 标题文字大小：20px
- 标题行高：1.3em
文字样式“阅读更多”
- 阅读更多暗光：粗体文本
- 阅读更多文案风格：TT
- 文字颜色阅读更多：#6D6A7E
- 字母间距阅读更多：1px
- 线高阅读更多：3.5em
更改文本分页的显示
- 显示分页暗光：粗体文字
- 文本颜色显示分页：#6D6A7E
- 字母间距显示分页：1px
- 显示分页文案风格：TT
移除边框
- 网格布局边框宽度：0px
悬停阴影框样式
- 影盒：见截图
- 起始位置：0px
- 盒子阴影模糊强度：38px
- 字幕字体颜色：rgba (109,106,126,0.25)
最终结果
结论
总之，如本教程所示，添加一些 CSS 片段可以为您提供摇滚博客文章片段所需的功能，并具有出色的悬停效果。
这种方法最重要的一点是，我们可以使用 Divi 的集成选项为博客模块添加其他样式。 此外，它将允许您自定义帖子元素，包括添加更多悬停效果。
希望这将有助于您的博客 网站Web Divi 在设计和功能方面得到了额外的提升。 在评论中告诉我们您的经历。
