Jquery 向左展开箭头元素

滑块上有两个箭头，分别指向左侧和右侧。将鼠标悬停在这些箭头上时，我希望箭头根据选择的箭头展开，显示“Prev”或“Next”

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

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

有没有办法使用CSS和/或jQuery只显示最右边的元素数据，然后悬停时将宽度增加到左边？理想情况下，我想将其转换为“动画”功能，并且不想使用两个图像——一个带有箭头，另一个带有箭头和文本

非常感谢您的帮助

丹

编辑

我刚刚发现了关于JSFIDLE的信息，所以我将我的代码（减去atm上的图像）复制到了那里，并进行了建议的修改；然而，我想得到一个字显示格式更好一点。有什么想法吗？

给你

HTML:

注意：CSS 3魔术在IE中不起作用

现场演示：

给你

HTML:

注意：CSS 3魔术在IE中不起作用

---

现场演示：

可以在没有CSS3的情况下以非常类似的方式完成，并且应该在IE中工作（免责声明：尽管我不能在我使用的机器上测试），只需在IE8中测试即可

HTML:

演示：

---

编辑：忘记：专注于锚

可以在没有CSS3的情况下以非常类似的方式完成，并且应该在IE中工作（免责声明：尽管我不能在我使用的机器上测试），只需在IE8中测试即可

HTML:

演示：

---

编辑：忘记：关注主播

听起来不太复杂，但如果没有演示，很难回答。如果你能使用它，你就更有可能得到一个好的答案。谢谢你的三十点，我以前从未听说过这个网站！听起来不太复杂，但如果没有演示，很难回答。如果你能使用它，你就更有可能得到一个好的答案。谢谢你的三十点，我以前从未听说过这个网站！布里尔：这非常有效，谢谢你——并且能够相应地设计跨度。谢谢。这就是Brill的最终结果，非常感谢——并且能够相应地设计跨度。谢谢。这就是最终的结果

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

#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 '; }

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

.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;}