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

我想在链接上使用鼠标悬停鼠标时放大链接的字体大小，这很容易通过CSS代码中的以下行来实现。CSS：在放大字体大小时保持div大小相同

a:hover {font-size:110%}

然而，当链接字体大小的增加，也将“膨胀”的<div>我的链接是在规模，这将“挤”它下面的股利，使整个页面“摇”。

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

来源

2013-02-05 CodeNoob

它会更好，如果你共享你的HTML/CSS，你已经有了。另外，尝试添加“overflow：hidden”到所述div。 – KBN

你可以让你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; 
}

来源

2013-02-05 07:02:10

所有解决方案都可以工作，但我觉得这是最简单最直观的解决方案 – CodeNoob

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

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

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%; 
}

来源

2013-02-05 07:07:54 michaelcurry

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%; 
}

查看实时

来源

2013-02-05 07:42:12

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

回答

相关问题