向左展开箭头元素

Question

我在滑块上有两个箭头，指向左和右。将鼠标悬停在这些箭头上时，我希望箭头扩展为“上一个”或“下一个”，具体取决于选择了哪个。

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

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

有没有办法使用 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/

Answer 2

可以在没有 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/

编辑：忘记了：专注于锚点