Jak zmienić zawartość na dymku

Bawiłem się tym i pomyślałem, że to będzie całkiem proste. Próbuję najechać kursorem na etykietę „NEW”. W stanie zatrzymania zmień zawartość z „NOWY” na „DODAJ” używając tylko 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>

Tutaj jestJSFiddle aby pokazać ci, z czym pracuję.

questionAnswers(4)

yourAnswerToTheQuestion