Переключить текст при наведении курсора мыши толкает текст в сторону вместо того, чтобы исчезнуть

Question

я воссоздал текст тумблер на висения с помощью CSS и HTML на основе этой ссылке http://jsfiddle.net/G28qz/

Однако, мне кажется, чтобы получить странную ошибку всякий раз, когда я наведите курсор мыши на ссылке он переключается на второй текст, но первый текст не исчезает, а остается на месте и подталкивает второй текст вправо.

Так как я могу сделать второй текст, и первый текст исчезнет, ​​когда я навису над ним?

Это моя скрипка: http://jsfiddle.net/nL4guLkL/

HTML:

<div class="shareactions"> 

<a href="#" id="mew" class="shareicons"> 
<span class="nextoicons">Click Me</span> 
<span class="hovericons">ScrollMe</span> 
</a> 

<a href="#" id="mewtwo" class="shareicons"> 
<span class="nextoicons">Press it</span> 
<span class="hovericons">Push it</span> 
</a> 

<a href="#" id="pika" class="shareicons"> 
<span class="nextoicons">Hit Me</span> 
<span class="hovericons">Punch Me</span> 
</a> 

</div> 

CSS:

.nextoicons { margin-right:10px;} 

.shareicons { display:inline-block; width:100%; position:relative; margin-left:5%; white-space:nowrap;} 


     /* Hide the second piece of text by default */ 
    a.shareicons .hovericons { 
     display:none; 
    } 

    /* Hide the first piece of text on hover */ 
    a.shareicons:hover .nexttoicons { 
     display:none; 
    } 

    /* Re-show the second piece of text on hover */ 

    a.shareicons:hover .hovericons { 
     display:inline; 
    } 

.shareactions { width:100%; margin-top:-60px; height:40px; background-color:#363; line-height:42px; display:inline-block; float:left;} 

Если кто-нибудь может помочь мне понять это, я бы с удовольствием оценил ,

Спасибо.

Answer 1

вы видите класс HTML nexttoicons неправильно

HTML

nextoicons 

CSS

nexttoicons 

FIDDLE