Question

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

a:hover {font-size:110%}

然而，当链接字体大小增加时，它还会“膨胀”我的链接所在的<div>的大小，这将“挤压”其下方的div并使整个页面“摇动” ”

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

Answer 1

以上代码有效，但这里有另一种可能适用于您的解决方案。没有理由使用％，如果有，这个doce仍然有用。

有两个示例：字体大小为像素，字体大小为百分比。

http://jsfiddle.net/MJUjP/

HTML

<div class="main">
    <div class="content">
        PX
    </div>
</div>

<div class="main">
    <div class="content2">
        %
    </div>
</div>

CSS

.main {
    /*Styling for better viweing*/
    background: #000fff;
    float:left;
    height: 100px;
    width: 100px;
}
.content{
     /*Styling for better viweing*/
    background: #ff0000;
    margin: 8px;
    border: #000 1px solid;
    float:left;
    text-align: center;

    /*Set Size of DIV snd font*/
    height:80px;
    width:80px;
    font-size:30px;

    /*Optional to hide overflow*/
    overflow-x:hidden;
    overflow-y:hidden;
}
.content:hover{
    /*Set New Font Size*/
    font-size:80px;
}


.content2{
     /*Styling for better viweing*/
    background: #ff0000;
    margin: 8px;
    border: #000 1px solid;
    float:left;
    text-align: center;

    /*Set Size of DIV snd font*/
    height:80px;
    width:80px;
    font-size:100%;
    line-height:100%;

    /*Optional to hide overflow*/
    overflow-x:hidden;
    overflow-y:hidden;
}
.content2:hover{
    /*Set New Font Size*/
    font-size:800%;
    line-height:110%;
}

Answer 2

您可以使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;
}

Answer 3

HTML：

<div id="mydiv">
   <a href="#">Link</a>
</div>

CSS：

#mydiv a {
   display:block;
   font: 16px/30px Arial, Helvetica, sans-serif;
   border:1px solid #CCC;
   padding:10px;
}
#mydiv a:hover {
   font-size: 200%;
}

查看实时http://jsfiddle.net/imtiazmasrur/rqMLd/

Answer 4

听起来您在em的高度上使用div长度值。通常这不是一件坏事，但是如果您增加字体大小，那么也会增加em的值。通常为1 em = 16px。

您可以在rem的{{1}}属性上使用height长度值。这样，您可以使用html根的标准字体大小。（只要您没有执行类似div的操作。这会将html { font-size 35px; }的标准值更改为em。）

或者您可以去上学，并在35px上使用px长度值。

CSS：扩大字体大小时保持div大小相同

4 个答案: