我一直在玩这个游戏，而且我认为这很简单。我正在尝试将鼠标悬停在“ 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，向您展示我正在使用什么。