如何仅使用 CSS 更改悬停时的内容？-css教程-PHP中文网

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

Barbara Streisand

发布： 2024-11-02 19:29:02

原创

920 人浏览过

How to Change Content on Hover Using Only CSS?

如何更改悬停时的内容

简介

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

问题陈述

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

CSS 内容属性来救援

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

解决方案

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

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

登录后复制

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

使用 ::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>

登录后复制