悬停时自动展开隐藏内容，手风琴式的信息展示
← 返回 卡片 类特效列表无需 JavaScript，纯 CSS 的 max-height 过渡即可实现手风琴展开效果，收放自如。
上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .ex{width:280px;margin:30px auto;background:#161b22;border:1px solid #2d3748;border-radius:12px;overflow:hidden}
.fx .ex .hd{padding:14px 18px;font-weight:700;color:#e6edf3;cursor:pointer}
.fx .ex .bd{max-height:0;overflow:hidden;transition:max-height .4s ease}
.fx .ex .bd p{margin:0;padding:0 18px 14px;font-size:13px;color:#9aa7b8}
.fx .ex:hover .bd{max-height:110px}<div class="fx">
<div class="ex"><div class="hd">悬停展开</div><div class="bd"><p>无需 JavaScript，纯 CSS 的 max-height 过渡即可实现手风琴展开效果，收放自如。</p></div></div>
</div>