如何仅使用 CSS 更改悬停时的内容？

如何更改悬停时的内容

简介

悬停效果是一种常用技术，用于提供附加信息或引起对元素的注意网页。本文探讨了一种简单而有效的方法，仅使用 CSS 即可在鼠标光标悬停在元素上时更改元素的内容。

问题陈述

目标是更改“的内容”当鼠标光标悬停在“NEW”标签上时，标签会变为“ADD”。这应该纯粹通过 CSS 来实现，而不使用 JavaScript 或任何其他库。

CSS 内容属性来救援

CSS 内容属性，与 ::after 和 ::before 伪类一起引入elements，提供了一种修改元素内容的方法。让我们利用这个属性来解决我们的问题：

解决方案

1. 隐藏鼠标悬停时的原始内容：

<code class="css">.item:hover a p.new-label span {
  display: none;
}</code>

此规则使用显示：没有隐藏 的属性当鼠标光标悬停在 .item 上时包含“NEW”内容的元素。

2. 使用 ::after:

<code class="css">.item:hover a p.new-label:after {
  content: 'ADD';
}</code>

伪- element ::after 用于在 .new-label 元素处于悬停状态时在其后面插入“ADD”内容。 content 属性指定新内容。

更新了代码

<code class="css">body {
  font-family: Arial, Helvetica, sans-serif;
}

.item {
  width: 30px;
}

a {
  text-decoration: none;
}

.label {
  padding: 1px 3px 2px;
  font-size: 9.75px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: #bfbfbf;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-decoration: none;
}

.label.success {
  background-color: #46a546;
}

.item a p.new-label span {
  position: relative;
  content: 'NEW';
}

.item:hover a p.new-label span {
  display: none;
}

.item:hover a p.new-label:after {
  content: 'ADD';
}
</code>

结论

通过将 content 属性与悬停效果相结合，我们成功实现了一个简单而优雅的解决方案使用纯 CSS 更改悬停时的内容。该技术应用广泛，可用于增强用户交互并以动态且具有视觉吸引力的方式提供附加信息。

以上是如何仅使用 CSS 更改悬停时的内容？的详细内容。更多信息请关注PHP中文网其他相关文章！