悬停时使用 CSS 将图标替换为文本

在 Web 开发中，我们经常需要在页面中使用图标来让用户更直观地理解页面的功能。但是，有时候这些图标只能在悬停时才会显示出它们所代表的含义。这时候，我们可以通过使用 CSS 在悬停时将图标替换为文本来增强页面的可读性。

实现方法

实现这个效果的关键是使用 CSS 的 :after 伪类，结合 content 属性和 attr() 函数。

首先，我们需要创建一个包含图标和文本的元素。例如，我们可以使用一个 button 元素：

<button class="icon">
  <i class="fas fa-search"></i>
  Search
</button>

其中，<i> 元素包含了一个 Font Awesome 的搜索图标，Search 文本显示在图标旁边。

接下来，我们需要使用 CSS 来隐藏这个图标，直到用户悬停在按钮上。我们可以通过以下代码来实现这一效果：

.icon i {
  display: none;
}

.icon:hover i {
  display: inline;
}

这段 CSS 代码将图标的 display 属性设置为 none，使其在默认情况下不显示。当用户悬停在按钮上时，我们将使用 :hover 伪类来将图标的 display 属性设置为 inline，从而显示出来。

现在，我们已经创建了一个可以通过悬停来切换图标和文本的按钮元素。但是，这个效果在 button 元素中表现得比较不自然。我们可以使用 ::before 伪类来创建一个新的元素，用于显示文本。

.icon::before {
  content: attr(data-content);
}

.icon i {
  display: none;
}

.icon:hover i {
  display: inline;
}

.icon:hover::before {
  display: none;
}

在上面的代码中，我们添加了一个 ::before 伪类，并使用 content 属性将其内容设置为 data-content 属性的值。我们还将 ::before 元素的 display 属性设置为 none，使其不会在默认情况下显示出来。当用户悬停在按钮上时，我们将使用 :hover 伪类来将 ::before 元素的 display 属性设置为 none，并将图标的 display 属性设置为 inline。

最后，我们需要在 HTML 中加入 data-content 属性，以便将文本传递给 ::before 伪类。

<button class="icon" data-content="Search">
  <i class="fas fa-search"></i>
</button>

现在，我们已经实现了一个可以在悬停时将图标替换为文本的按钮元素。

结论

通过使用 CSS 的 :after 和 ::before 伪类以及 content 属性和 attr() 函数，我们可以创建一个可以在悬停时将图标替换为文本的元素。这个效果可以增强页面的可读性，并帮助用户更好地理解页面的功能。