使用jquery扩展徽标，它可能吗？

Question

我对jquery有疑问（我相信使用相同的解决方案会解决我需要的问题）我对页面顶部的徽标有了一个想法，但是没有找到可以解决这个问题的效果我认为是第一张图片中的以下内容：

当您将徽标悬停在显示其文字范围的徽标上时，徽标是静态的，例如：

这可能吗？

Answer 1

这是一个粗略的演示，仅使用HTML / CSS：

HTML

<h1>Logo
    <span>More Stuff</span>
    <div>Square</div>
</h1>

CSS

h1 span {
    display: block;
    overflow: hidden;
    height: 0;
    transition: height 0.5s ease 0s;
}

h1:hover span {
    height: 1.2em;
}