切換文本推文到一邊，而不是消失

Question

的我用CSS和HTML基於此鏈接http://jsfiddle.net/G28qz/

但是在重新上懸停切換的文字，我彷彿每當我懸停在鏈接到收到奇怪的錯誤它切換到第二個文本，但第一個文本不會消失，而是保持原樣並將第二個文本向右推。

所以，我怎樣才能讓第二個文本出現，第一個文本dissapear當我在它懸停？

這是我的小提琴：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