如何在悬停时更改内容答案

【问题标题】：How to change content on hover如何在悬停时更改内容
【发布时间】：2013-09-27 19:14:26
【问题描述】：

我一直在玩这个，我认为它会很简单。我想要做的是将鼠标悬停在“新”标签上。进入悬停状态后，仅使用 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{
  content: 'ADD';
}

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

这是一个JSFiddle，向您展示我正在使用的内容。

【问题讨论】：

您不能使用 CSS 更改现有元素的内容。
试试这个jsfiddle.net/G9LKK
这不是 CSS 的用途。如果您想要互动的东西，请使用正确的工具：JavaScript。

标签： html css

【解决方案1】：

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

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

JSFiddle Demo

【讨论】：

+1 你打败了我：jsfiddle.net/fLMSd/16 只是想我也会展示我的小提琴，因为它被剥离到最基本的部分
实际上，CSS3 的content 提出了一个能够改变实际元素内容的提案，但被放弃了。 CSS2 的content 只对生成的内容进行操作。

【解决方案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 属性。这个元素是内联的默认。

【讨论】：

【解决方案3】：

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

&lt;span class="label"&gt;&lt;/span&gt;

【讨论】：

【解决方案4】：

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

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

【讨论】：