html - 悬停时切换文本会将文本推到一边而不是消失

Question

我根据此链接使用 css 和 html 在悬停时重新创建了切换文本 http://jsfiddle.net/G28qz/

但是，每当我将鼠标悬停在它切换到第二个文本的链接上时，我似乎会收到一个奇怪的错误，但第一个文本不会消失，而是保留在原位并将第二个文本推到右边。

那么当我将鼠标悬停在第二个文本上时，如何让第二个文本出现而第一个文本消失？

这是我的 fiddle :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