使用唯一转换显示悬停时的文本

Question

我正在创建一个个人网站，我希望主页面上有4个按钮，这些按钮使用CSS过渡来“增长”并显示隐藏文本。

我附上了一张照片，告诉你我的意思：

所以基本上，如果你在它上面盘旋，左边，右边和上边框会扩展以显示文字。现在我只是试图达到效果而不是担心它成为一个真正的按钮，所以我一直在使用悬停状态。

棘手的问题实际上只是顶部和底部。左右的只是水平增长。

我一直在搞乱这一段时间，只是水平缩放：

<div id="container">
    <div id="content">
        <p>
        Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
        </p>
        <p>
        Test Test Test Test Test Test Test Test Test Test Test Test Test Test
        </p>
    </div>
</div>

#container #content {
max-width: 0px;
transition: max-width 0.15s ease-out;
overflow: hidden;
background: #d5d5d5;
}

#container:hover #content {
max-width: 500px;
transition: max-width 1s ease-in;
}

它基于我在搜索答案时找到的其他人的代码。我理解这里发生了什么，但我无法弄清楚如何扩展它。如果我添加max-height并将其设置为0以外的任何值，我也会失去过渡效果。无论如何，我想要更复杂的东西并且可以使用一些指导。

您认为我需要编写一些JS来动画按钮以从底部中心扩展？我发现它可以向各个方向扩展：

http://jsfiddle.net/xcWge/14/

尝试弄乱特定的边距，但没有得到任何响应结果。

值得注意的是，我对这一切都很陌生，所以我可能会在我脑海中。我仍然决心要实现这种功能。有人有什么想法吗？

Answer 1

所以我想出了问题，并实现了我想要的原型。这是代码：

https://jsfiddle.net/0r81f7cv/3/

原来这就是问题所在：

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>

直到有人四天向我指出这个问题之后才知道这一点，但JQuery在1.9之后贬低了.toggle函数，这导致了我上次评论中JSfiddle的问题。在我读到这篇文章之前，这对我来说似乎非常荒谬：

Why did jQuery remove .toggle() method?

所以，对于那些曾经遇到kosh代码问题的人，请检查你的图书馆版本！