html - CSS:在放大字体大小时保持div大小相同

Question

我想在将鼠标悬停在链接上时放大链接的字体大小，这可以通过 CSS 代码中的以下行轻松实现。

a:hover {font-size:110%}

但是，当链接字体大小增加时，它也会“膨胀”<div> 的大小。我的链接在其中，这会“挤压”它下面的 div 并使整个页面“摇晃”。

有没有办法保持 <div> 的大小？相同，而链接字体大小放大？

Answer 1

你可以让你的div有一个固定的大小，并且带有 position:absolute;为你的<a> , 使其字体变大不会影响 <div> .

DEMO

HTML

<div id="content">
    <a href="#">Hey there</a>
</div>
<div id="more">More Divs</div>

CSS

a
{
    font-size:16px;
    position:absolute;

}
a:hover
{
    font-size:110%;
}
#content
{
    position:relative;
    height:20px;
}