html - 将 child 转换到与他们的 parent 相同的位置？

Question

这是两段的图片:

当我将鼠标悬停在顶部段落上时，我会放大文本。

当我将鼠标悬停在底部段落上时，我只希望我标记为橙色背景的跨度按比例放大。

但是请注意橙色单词是如何相互重叠的。 如何让跨度缩放，以便它们出现在与缩放整个段落时相同的位置？

这是一个演示 http://jsbin.com/yamatuke/1

这是 html 的结构:

<div id="a" class="textblock">
Bacon ipsum dolor sit amet esse minim anim, ham pig dolore bacon. Laboris anim drumstick boudin, eiusmod shankle minim ground round jowl nulla fatback consectetur magna aliquip brisket. Culpa ground round ullamco officia. In voluptate pariatur bacon.
</div>


<div id="b" class="textblock">
<span>Bacon&nbsp;</span><span>ipsum&nbsp;</span><span>dolor&nbsp;</span><span>sit&nbsp;</span><span>amet&nbsp;</span><span>esse&nbsp;</span><span>minim&nbsp;</span><span>anim,&nbsp;</span><span>ham&nbsp;</span><span>pig dolore&nbsp;</span><span>bacon.&nbsp;</span><span>Laboris&nbsp;</span><span>anim&nbsp;</span><span>drumstick&nbsp;</span><span>boudin,&nbsp;</span><span>eiusmod&nbsp;</span><span>shankle&nbsp;</span><span>minim&nbsp;</span><span>ground&nbsp;</span><span class='c'>round&nbsp;</span><span class='c'>jowl&nbsp;</span><span class='c'>nulla&nbsp;</span><span class='c'>fatback&nbsp;</span><span class='c'>consectetur&nbsp;</span><span class='c'>magna&nbsp;</span><span class='c'>aliquip&nbsp;</span><span class='c'>brisket.&nbsp;</span><span class='c'>Culpa&nbsp;</span><span class='c'>ground&nbsp;</span><span>round&nbsp;</span><span>ullamco&nbsp;</span><span>officia.&nbsp;</span><span>In&nbsp;</span><span>voluptate&nbsp;</span><span>pariatur&nbsp;</span><span>bacon.</span>
</div>

Answer 1

<span></span>标签仍然继承它们所属的行的属性。换句话说，它们与该行的其余部分一样水平居中。为了实现您想要的效果，您必须更改 DIV 中的line-height 以表示放大的 SPAN 文本的大小。