Question

滑块上有两个箭头，左右指向。在这些箭头上方盘旋时，我希望箭头展开以表示＆＃34; Prev＆＃34;或＆＃34;下一步＆＃34;，取决于选择哪一个。

在左箭头上，这很好，因为我将整个div设置为包含箭头图像，然后设置单词＆＃39; 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/

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/

编辑：忘记：专注于锚点

向左展开箭头元素

2 个答案: