html - 如何在悬停时更改内容

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向你展示我在做什么。

Answer 1

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

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

JSFiddle Demo