jquery - 向左展开箭头元素

Question

我在 slider 上有两个箭头，分别指向左侧和右侧。将鼠标悬停在这些箭头上时，我希望箭头展开以显示“上一个”或“下一个”，具体取决于选择的是哪个。

在左箭头上，这没问题，因为我将整个 div 设置为包含箭头图像，然后是单词“PREV”，并设置容器的大小以便只有箭头可见。然后在翻转时，容器的宽度增加。

但是，这种策略对右箭头不起作用，因为箭头会自行显示，然后悬停时“下一步”一词会出现在它的右侧，而我希望它出现在左侧。如果我将单词放在箭头之前，那么我只会看到单词而不是箭头，直到将鼠标悬停在它上面。

有没有办法使用 CSS 和/或 jQuery 只显示最右边的元素数据，然后在悬停时向左增加宽度？理想情况下，我想将它变成一个“动画”功能，并且不想使用两张图片 - 一张带有箭头，一张带有箭头和文本。

非常感谢任何帮助

丹

编辑

刚刚发现有关 JSFIDDLE 的信息，因此已将我的代码(减去图像 atm)复制到 http://jsfiddle.net/VzNFw/经建议的修改；但是我想在显示单词时使格式更好一些。有什么想法吗？

Answer 1

给你...

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/