2

ホバー時にフォントのすばらしいアイコンを変更して、大きくします。私が直面している問題は、1 つのアイコンを大きくすると、その横にある他のアイコンが移動することです。つまり、アイコンが上下に移動します。

問題を示すために、この基本フィドルを作成しました。パディングとマージンをいじって、各アイコンの周りに必要なスペースを作成して、他のアイコンが動かないほど十分なスペースを確保しました。私は確かにCSSの新人なので、簡単に行ってください;）

これがフィドルです： http://jsfiddle.net/newmanw/MUHVD/

マークアップ:

<title>Bootstrap 101 Template</title>
 <body>
    <div>
        <span>
            <i class="icon icon-warning-sign"></i>
            <i class="icon icon-ok"></i>
            <i class="icon icon-flag"></i>
        </span>
    </div>
  </body>

CSS

@import url('https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css');

.icon:hover{
    cursor: pointer;
    font-size: 28px;
}
4

4 に答える 4

5

これはうまくいきますか？

.icon:hover{
    cursor: pointer;
    font-size: 28px;
 }
 .icon{
   float:left;
   width:30px;   
  text-align:center;
}

http://jsfiddle.net/MUHVD/1/

于 2013-03-12T02:02:36.597 に答える
0

vertical-alignアイコンのプロパティを に設定するtext-topと、垂直方向の位置は同じに保たれますが、水平方向に移動する必要があります。

.icon {
    vertical-align: text-top;
}

.icon:hover{
    cursor: pointer;
    font-size: 28px;
}

http://jsfiddle.net/MUHVD/6/

于 2013-03-12T02:11:23.627 に答える
0

ある程度、これはできません。壁の一番下のレンガを大きくすると、他のすべてのレンガが押し出されます。

これを行うには、アイコンを強制的にabsolute配置し、サイズ変更中にすべてのアイコンを静止させておく JavaScript を使用します。

アイコンに十分な「パディング」を与えることもできます (必ずしもではありませんpadding)。サイズが変更されたときに位置をまっすぐに保ちます。

http://jsfiddle.net/MUHVD/5/

于 2013-03-12T02:00:53.910 に答える
0

たとえば、マウスをその上に置いた後にフォントサイズが大きくなる幅を使用float: left;して指定する必要があります。.iconここでは 28px に拡大したかったのでwidth: 28px;、.icon.

于 2013-03-12T02:33:32.980 に答える