如何在鼠标悬停时更改内容

Question

我一直在尝试这个，本以为它会很简单。我想要做的是将鼠标悬停在“NEW”标签上。进入其悬停状态后，仅使用CSS将内容从“NEW”更改为“ADD”。

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{
  content: 'ADD';
}

<div class="item">
    <a href="">
         <p class="label success new-label"><span class="align">New</span></p>
    </a>
</div>

以下是我正在处理的内容，这里有一个JSFiddle演示。

- Modelesq

---

使用 CSS 无法改变现有元素的内容。 - BoltClock

试试这个：http://jsfiddle.net/G9LKK/ - PSL

这不是CSS的本意。如果你想要交互式的东西，使用正确的工具：JavaScript。 - Havenard

Answer 1

CSS的content属性以及::after和::before伪元素已经为此引入。

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

例子：

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';
}

<div class="item">
    <a href="">
         <p class="label success new-label"><span class="align">New</span></p>
    </a>
</div>

这是原始的 JSFiddle Demo。

- Sachin

---

+1 你比我更快一步：http://jsfiddle.net/fLMSd/16/。只是想展示我的代码片段，因为它已经被简化到了最基本的内容。 - Pevara

实际上，曾经有一个提案希望CSS3的content能够修改实际元素的内容，但是这个提案被放弃了。现在只有CSS2的content可以操作生成的内容。 - BoltClock

Answer 2

这个确切的例子可以在Mozilla开发者页面上找到:

::after

如您所见，它甚至允许您创建工具提示! :) 另外，您可以使用 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属性，向元素添加装饰内容。此元素默认为行内元素。

- Adam Zielinski

Answer 3

.label:after{
    content:'ADD';
}
.label:hover:after{
    content:'NEW';
}

<span class="label"></span>

- user3668456

Answer 4

这可能对那些试图完全避免使用: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 上的演示：https://codepen.io/ifekt/pen/zBaEVJ

- Ajewole Toluwanimi