5

Twitter Bootstrap で使用する象徴的なフォントである Font-Awesome を使用しています。

マークアップ -

<i class="icon-remove reset-preference-button"></i>

CSS -

.reset-preference-button {
cursor: pointer;
}

JavaScript -

$(".reset-preference-button").on("click", function() {
// ... do something
});

ページをレンダリングすると、要素の上にカーソルを置いてもカーソルがポインターに変わりません。また、アイコンをクリックしても何も起こりません。イベントをバインドする前に、アイコンが存在することを確認しました。

私が要素を使用していることに注意してください。この要素のスタイルを明示的に設定すると、"display: inline-block;"うまく動作するようです。

私のテストによると、これはChromeでのみ発生します。Firefox & IE で正常に動作します。私の現在の Chrome バージョンは 18 ですが、他のバージョンにも影響します。

私はすでにhttps://github.com/FortAwesome/Font-Awesome/issues/157でバグを提出しました

4

2 に答える 2

5

よりクリーンなアプローチは、単純に要素にスタイルを追加する:beforeことです (そのため、オブジェクトの高さや幅を気にする必要はありません)。

これが私のCSSのサンプルコードです:

i:before {
  cursor: pointer;
}
于 2013-08-15T12:36:53.347 に答える
5

これは、要素にコンテンツがないために発生しています<i>。font awesome は css 疑似要素 :before を使用して、css でアイコンをレンダリングします。

高さと幅を 1em に設定し、表示を :block に設定できます

i {
  width: 1em;
  height: 1em;
  display:block;
  cursor: pointer;
}
于 2012-08-23T11:45:14.317 に答える