5

要素の上にマウスを置いて2倍のアイコンサイズを表示したい。

ブートストラップでFontAwesomeを使用しています。私はこのようなリストを持っています：

<ul>
    <li><a href ="#"><i class="icon-inbox"></i> Inbox<a/></li>
    <li><a href ="#"><i class="icon-print"></i> print<a/></li>
    ....
</ul>

「icon-2x」fontawesomecssクラスをマウスオーバー要素に追加して、より大きなアイコンを表示し、マウスを離したときにそのクラスを削除したいと思います。

FontAwesomeホームページの例のように見せたいです。このような：

ここに画像の説明を入力してください

jQueryで要素を見つけてcssクラスを追加しようとしましたが、できませんでした。

誰か助けてもらえますか？

ありがとう

4

4 に答える 4

7

CSSだけを使ってみません:hoverか？

li i[class^="icon-"] { font-size:12px; }
li:hover i[class^="icon-"] { font-size:24px; }

FontAwesomeはアイコンにフォントを使用するため、アイコンサイズを2倍にするには、フォントサイズを2倍にするだけです。もちろん、アイコンが横のテキストに対して相対的であることを保証するために、パディング、マージンなどにも対応する必要があります。

それでもjQueryを使用して新しいクラスを追加する場合は、次のようにします。

$('li').hover(function() {
    $('i[class^="icon-"]', this).addClass('icon-2x');
}, function() {
    $('i[class^="icon-"]', this).removeClass('icon-2x');
})
于 2013-02-15T11:50:10.983 に答える
7

CSSスケールを使用することをお勧めします（FontAwesomeを使用したページのリンクに使用しています）。

a:hover i { transform: scale(2); }

アイコンの横にある要素（他のテキストなど）は、フォントサイズの変更によって移動しません。

アップデート

私のホームページのフッターにあるFontAwesomeでどのように機能するかの例を参照してください：http：//pnowy.github.io/about/

于 2016-02-19T09:55:27.543 に答える
0

アニメーションスイッチが必要な場合は、javascriptを使用する必要があります。しかし、これを行うことで、それなしでこれを達成することができます

<ul>
    <li><a class="image" href ="#"></a> <p>Long story</p></li>
</ul>

そして、このようにスタイルを設定します

.image{
    float:left;
    display:block;
    background:url('http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png');
    width:50px;
    height:50px;
    background-size:50px 50px;
}
li p{
    line-height:50px;
    vertical-align:center;
}
li:hover p{
    line-height:70px;
}
li:hover .image{
    width:70px;
    height:70px;
    background-size:70px 70px;
}

ここでフィドルを見ることができますjsFiddle

于 2013-02-15T11:58:17.840 に答える
0

フォントサイズを：before疑似要素に適用する必要があります。

li:hover i:before {
    font-size: 24px /*or whatever*/
}

参照： http ：//astronautweb.co/snippet/font-awesome/

于 2013-02-15T12:55:43.663 に答える