如何在 Divi 中通过扩展角标签显示悬停内容 - CSS

在 Divi 中，我们可以使用自定义 CSS 代码来扩展标签并显示悬停内容。在本教程中，我们将通过下面的步骤来达到目的：

1. 创建角标容器。
2. 创建角标内容。
3. 编写 CSS 代码以显示角标并隐藏角标内容。
4. 在悬停时显示角标内容。

下面是具体的步骤：

Step 1: 创建角标容器

我们需要使用 Divi 模块中的代码模块来创建角标容器。将代码模块添加到要显示角标的地方，并在代码编辑器中添加以下 HTML 代码：

<div class="badge-container">
  <div class="badge-icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="badge-content">
    This is the badge content.
  </div>
</div>

在这个例子中，我们创建了一个包含一个角标图标和角标内容的容器。容器使用 CSS 类名 .badge-container，图标使用 .badge-icon，内容使用 .badge-content。我们将使用这些类名来编写我们的 CSS 代码。

Step 2: 创建角标内容

我们可以在 HTML 代码中添加我们想要显示的内容。在这个例子中，我们使用了一个简单的文本来表示角标内容。你可以使用其他 HTML 元素以更好的方式表示角标内容。

Step 3: 编写 CSS 代码以显示角标并隐藏角标内容

添加以下 CSS 代码来隐藏角标内容并显示角标图标：

.badge-icon {
  position: relative;
}

.badge-content {
  display: none;
  position: absolute;
  top: -50px;
  background: #333;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
}

.badge-container:hover .badge-icon {
  display: none;
}

.badge-container:hover .badge-content {
  display: block;
}

在这个例子中，我们首先将角标图标相对定位。然后，我们绝对定位角标内容并将其隐藏。在悬停时，我们将隐藏角标图标并显示角标内容。

Step 4: 在悬停时显示角标内容

现在，我们已经创建了角标容器并添加了 CSS 代码，让我们来检查悬停效果。将鼠标悬停在角标容器上，并你将看到角标内容显示在容器下方。

你可以根据需求对 CSS 代码进行调整，以更好地满足你的要求。

以上就是在 Divi 中扩展角标标签并显示悬停内容的步骤。希望您能喜欢这个教程！