通过独特的过渡显示悬停文本答案

【问题标题】：Reveal text on hover with unique transition通过独特的过渡显示悬停文本
【发布时间】：2016-07-14 18:08:32
【问题描述】：

我正在制作一个个人网站，我希望主页上有 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/

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

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

【问题讨论】：

请发布您自己的代码 jsFiddle。我无法找出给定 jsFiddle 中的问题。
你试过transform:scale(2);作为CSS属性吗？
@geeksal 这更像是一个起点，或者只是我正在寻找的行为的一般概念。不仅仅是对这个问题的明确答案，我正在寻找有关如何在概念上完成此任务的方向或见解。就像我说的，我是前端开发的新手。
@fauxserious 在您提出建议后，我正在使用该功能并实现了我正在寻找的行为，但无法弄清楚如何防止 div 中的文本被缩放。
所有你需要做的就是用一个负的比例值来定位里面的p标签，把它拉回来。

标签： css button text transition slide

【解决方案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?

因此，对于那些曾经遇到过代码问题的人，请检查您的库版本！

【讨论】：