0

リンク上でマウスをホバーするときにリンクのフォントサイズを拡大したいのですが、これは CSS コードの次の行で簡単に実現できます。

a:hover {font-size:110%}

ただし、リンクのフォントサイズが大きくなる<div>と、リンクが含まれているサイズも「膨張」し、その下のdivが「圧迫」され、ページ全体が「揺れ」ます。

<div>リンクのフォントサイズが大きくなる間、同じサイズを維持する方法はありますか?

4

4 に答える 4

1

上記のコードは機能しますが、あなたにも適用できる別の解決策があります。% を使用する理由はありません。使用する場合でも、このドキュメントは機能します。

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-05T07:07:54.223 に答える
1

divを固定サイズにすることができます。position:absolute;を使用する<a>と、フォントを大きくしても に影響しません<div>。

デモ

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-05T07:02:10.493 に答える
0

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/

于 2013-02-05T07:42:12.760 に答える