如何在悬停时更改内容

Question

我一直在玩这个,我觉得这很简单.我想要做的是将鼠标悬停在"新"标签上.一旦处于悬停状态,仅使用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,向您展示我正在使用的内容.

Answer 1

CSS的内容连同财产::after和::before伪元素被引入这个.

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

JSFiddle演示

Answer 2

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

::后

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

CSS content只能是withf with :after和:beforepseudo-elements,所以你可以尝试继续这样的事情:

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

CSS:after伪元素匹配所选元素的虚拟最后一个子元素.通常用于通过使用内容CSS属性向元素添加化妆品内容.默认情况下,此元素是内联的.

Answer 3

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

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

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