图标悬停时滑入文本

Question

我一直试图在下面得到一个效果:

1. 显示图标字体,旁边的文字被隐藏.
2. 悬停在图标上时,滑动隐藏的文本.从右侧滑入.

这是我到目前为止所尝试的:

(因为它需要很长时间,用一些随机键盘符号替换图标) 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; }

这就是我想要完成的效果.注释的文本和宽度从右侧滑动.但除此之外还有其他图标.我希望它也可以在背景宽度扩大时滑动它们.

这样可能,如果是这样的话怎么样？

Answer 1

这是你的演示,在CSS上做了一些工作.它有点啰嗦,但是在没有JavaScript的情况下完成工作,只使用动画的CSS过渡.由于某种原因,它使用max-width而不是动画更好,width但我不知道为什么.

演示: http ://jsfiddle.net/Marcel/h9EX9/1/

正确实现时,您可能希望使用额外的包装元素来设置动画,而不是<a>像<a>"tags"按钮中的多个元素一样.