Question

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

Answer 1

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

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

JSFiddle Demo

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：伪元素匹配后的虚拟最后一个子元素选中的元素。通常用于添加化妆品内容 element，通过使用内容CSS属性。这个元素是内联的默认值。

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

我刚学到的这个小而简单的技巧可以帮助有人试图避免：在悬停时更改文本之前或之后（无论出于何种原因）伪元素之前或之后。您可以在HTML中添加这两个文本，但会根据悬停改变CSS“显示”属性。假设第二个文本'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

如何在悬停时更改内容

4 个答案: