3

Twitter Bootstrap が提供するアイコンの 1 つをアンカーに表示しています。アンカーの上にマウスを置いたときに、デフォルトのアイコンを白のアイコンに切り替えたいです。

効果は、ここのナビゲーションバーのアンカーにカーソルを合わせたときのようになるはずです

これはどのように行われますか？

4

7 に答える 7

4

CSS疑似クラス：hoverを使用して、別の背景を設定します。

.menulink:hover { background-image: url('alternative_sprite.png'); }
于 2012-07-23T13:09:07.353 に答える
4

ホバー時に jQuery toggleClass() を使用して、アイコンを白に変更します。

このjsfiddleを参照してください。
HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<a href="#"><div class="btn btn-primary">
    <i class="glyphicon  glyphicon-print"></i>&nbsp;Click</div></a>
<br/>

脚本：

$("document").ready(function(){
    $("a").hover(function(){
        $('i').toggleClass('glyphicon-envelope glyphicon-print');
    });
});​
于 2012-07-23T15:23:04.463 に答える
1

グリフィコン画像を切り替えるだけですか？

（sassバージョンである私のcssから抽出され、私の画像は別の場所にありますが、あなたはアイデアを得る...）

&:hover{
  i{
    background-image: url("../images/bootstrap/glyphicons-halflings-white.png");
  }
于 2012-11-04T20:36:05.030 に答える
1

実際、AngularJS Web サイトでは Web フォントを使用してアイコンを表示しています。

font-family: 'FontAwesome';

そして、CSS 疑似クラス :before: を使用して font-icon を挿入します。

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: FontAwesome;
}

独自のアイコン Web フォントを作成することを決意した場合、これは素晴らしいソリューションです。

またはさらに良いことに、Font-Awesomeを使用できます。

于 2013-03-14T21:32:17.800 に答える
0

CSS psuedo-class：hover.を使用します。

.menulink:hover { background-image: url('myimage.png'); }
于 2012-07-23T13:11:06.390 に答える
0

上記の回答の一部は機能せず、すべてのグリフィコンが 1 の背景画像になります。

これは私から機能します。必要に応じてアイコンの色を変更したことに注意してください。

a:hover > [class^="icon-"] {
    background-image: url("bootstrap/img/glyphicons-halflings-orange-dark.png") !important;
}
于 2013-11-29T14:14:35.377 に答える