42

我一直在玩这个，我认为它会很简单。我想做的是将鼠标悬停在“新”标签上。进入悬停状态后，仅使用 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向您展示我正在使用的内容。

4

4 回答 4

69

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

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

JSFiddle 演示

于 2013-09-27T19:18:47.317 回答
14

这个确切的例子出现在 Mozilla 开发者页面上：

：：后

如您所见，它甚至允许您创建工具提示！content: attr(data-descr);:) 此外，您可以使用, 并将其存储在HTML 标记的属性中，而不是将实际文本嵌入到您的 CSS中data-descr="ADD"（这很好，因为您可以例如翻译它）

CSScontent只能: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 属性向元素添加装饰性内容。默认情况下，此元素是内联的。

于 2013-09-27T19:19:10.490 回答
10 

.label:after{
    content:'ADD';
}
.label:hover:after{
    content:'NEW';
}
<span class="label"></span>

于 2017-04-01T21:58:57.167 回答
6

我刚刚学到的这个小而​​简单的技巧可能会帮助试图完全避免 :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

于 2016-07-27T14:32:29.540 回答