我一直试图在下面得到一个效果：
>图标字体显示,旁边的文字被隐藏.
>当悬停在图标上时,滑动隐藏的文本.从右侧滑入.
这是我到目前为止所尝试的：
(因为它需要很长时间,用一些随机键盘符号替换图标)
http://jsfiddle.net/h9EX9/
ul li { display: inline-block; list-style-type: none; margin-right: 10px; background: #eee; }
ul li span { display: inline-block; }
ul li a { display: inline-block; width: 0; height: 0; overflow: hidden; }
ul li:hover a { transition: all 1s ease-out; width: 100%; height: auto; }
这就是我想要完成的效果.注释的文本和宽度从右侧滑动.但除此之外还有其他图标.我希望它也可以在背景宽度扩大时滑动它们.
这样可能,如果是这样的话怎么样？
最佳答案
这是你的演示,在CSS上做了一些工作.它有点啰嗦,但是在没有JavaScript的情况下完成工作,只使用动画的CSS过渡.出于某种原因,它使用最大宽度而不是宽度更好地动画,但我不确定为什么.
原文链接：https://www.f2er.com/css/427337.html演示：http://jsfiddle.net/Marcel/h9EX9/1/
正确实现时,您可能希望使用额外的包装元素来设置动画而不是< a>.因为你将有多个< a>例如,“标签”按钮中的元素.
