向左扩展箭头元素

Question

我在滑块上有两个箭头，指向左侧和右侧。在悬停在这些箭头上时，我希望箭头展开为“Prev”或“Next”，具体取决于选择哪一个。

在左边的箭头上，这很好，因为我将整个div设置为包含箭头图像，然后单词'PREV，并设置容器的大小以便只显示箭头。然后在翻滚，我有容器的宽度增加。

但是，这种策略在右箭头上不起作用，因为箭头呈现出来，然后悬停在右侧，'NEXT'出现在右侧，而我希望它在左侧。如果我把这个词放在箭头前面，那么我只能看到这个词，而不是箭头，直到它在它上面盘旋。

有什么办法使用CSS和/或jQuery来只显示最右边的元素数据，然后有宽度增加到左侧悬停？理想情况下，我想将它变成一种“动画”功能，并且不希望使用两个图像 - 一个带有箭头，另一个带有箭头和文本。

任何帮助是极大的赞赏

丹

编辑

刚刚发现有关的jsfiddle，于是纷纷在http://jsfiddle.net/VzNFw/与修改，复制我的代码（减去图像ATM）到那里建议;不过，我希望在单词显示上使格式更好一些。有任何想法吗？

Answer 1

可以不CSS3以非常相似的方式进行，并应在IE浏览器 （免责声明：虽然我不能我使用的机器上测试） ，只是在IE8中测试，它的工作原理。

HTML：

<div class="slider"> 
    <a class="left" href="">&lt;<span>Left</span></a> 
    <a class="right" href=""><span>Right</span>&gt;</a> 
</div> 

CSS：

.slider { width:200px; background:#ddd; overflow:hidden; } 
.slider a {color:#000; text-decoration:none; padding:2px 5px; cursor:pointer; background:#ccc; } 
.slider a span {display:none;} 
.slider a:hover, .slider a:focus { background:#bbb; } 
.slider a.left { float:left; } 
.slider a.left:hover span, .slider a.left:focus span {display:inline;} 
.slider a.right { float:right; } 
.slider a.right:hover span, .slider a.right:focus span {display:inline;} 

演示：http://jsfiddle.net/pMFmN/

编辑：忘了：专注于锚

Answer 2

在这里你去...

HTML：

<div id="slider"> 
    <span>&lt;</span> 
    <span>&gt;</span> 
</div>  

CSS：

#slider { width:200px; background:#ddd; overflow:auto; } 
#slider span { padding:2px 5px; cursor:pointer; background:#ccc; } 
#slider span:hover { background:#bbb; } 
#slider span:first-child { float:left; } 
#slider span:first-child:hover::after { content:' PREV'; } 
#slider span:last-child { float:right; } 
#slider span:last-child:hover::before { content:'NEXT '; } 

注：CSS 3魔法并不在IE浏览器。

现场演示：http://jsfiddle.net/simevidas/eUCMu/1/