Html 如何更改悬停时的内容

我一直在玩这个，我想它会很简单。我想做的是把鼠标悬停在“新”标签上。一旦处于悬停状态，仅使用CSS将内容从“新建”更改为“添加”

正文{
字体系列：Arial、Helvetica、无衬线字体；
}
.项目{
宽度：30px；
}
a{
文字装饰：无；
}
.标签{
填充物：1px 3px 2px；
字体大小：9.75px；
字体大小：粗体；
颜色：#ffffff；
文本转换：大写；
空白：nowrap；
背景色：#bfbf；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
文字装饰：无；
}
.成功{
背景色：#46a546；
}
.项目a p.新标签跨度{
位置：相对位置；
内容：“新”
}
.项目：将鼠标悬停在p.新标签范围上{
显示：无；
}
.项目：将p.新标签悬停{
内容：“添加”；
}

为此引入了CSS属性以及

：：after

和

：：before

伪元素

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

---

mozilla开发者页面上提供了这个确切的示例：

如您所见，它甚至允许您创建工具提示！：）此外，您可以使用

content:attr（data descr），而不是将实际文本嵌入CSS中

，并将其存储在HTML标记的

data descr=“ADD”

属性中（这很好，因为您可以翻译它）

CSS

content

只能与

：after

和

：before

伪元素一起使用，因此您可以尝试执行以下操作：

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

CSS:after伪元素与 选定的元素。通常用于将化妆品内容添加到 元素，通过使用content CSS属性。此元素由 默认

---

我刚刚学到的这个简单的小技巧可能会帮助一些人在更改悬停文本时完全避免：before或：after伪元素（无论出于何种原因）。您可以在HTML中添加这两个文本，但根据悬停更改CSS“display”属性。假设第二个文本“Add”有一个名为“Add label”的类；这里有一点修改：

span.add-label{
 display:none;
}
.item:hover span.align{
 display:none;
}
.item:hover span.add-label{
 display:block;
}

下面是codepen的演示：

.label:之后{
内容：'添加'；
}
.标签：悬停：之后{
内容:"新";；
}

---

您无法使用CSS更改现有元素的内容。请尝试此操作。这不是CSS的用途。如果你想要交互式的东西，请使用合适的工具：JavaScript。+1你比我强：我想我也会展示我的小提琴，因为它本质上是赤裸裸的，有一个建议是CSS3的

内容

能够改变实际元素的内容，但这被放弃了。CSS2的

内容

只对生成的内容进行操作。