CSS、特に Firefox でカスタム カーソル画像を設定するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-11-11 07:27:03
オリジナル
521 人が閲覧しました

How to Set Custom Cursor Images in CSS, Especially in Firefox?

CSS でのカスタム カーソル画像の使用

特定の用途に虫眼鏡などのカスタム カーソル画像を使用したい場合があります。 Web ページ上の要素。これは多くのブラウザで簡単に実現できますが、Firefox には特有の課題があります。

カスタム カーソルを設定する一般的な方法の 1 つは、CSS を使用することです。ただし、ユーザーが提供したコード a.heroshot img {cursor:url(/img/magnify.cur), pointer;} は、残念ながら Firefox では動作しません。

問題は、次の点にあります。 macOS 上の Firefox は、URL ベースのカーソル定義の使用をサポートしていません。これを解決するには、代わりに -moz-zoom-in キーワードを使用します。

a.heroshot img {
  cursor: url(/img/magnify.cur), -moz-zoom-in, auto;
}
ログイン後にコピー

この更新された CSS コードは、magnify.cur 画像をサポートするブラウザーに Firefox 固有のズーム カーソルを表示します。 Firefox、またはどちらもサポートされていない場合はシステムのデフォルトのカーソル。ブラウザが認識するリストの最初のカーソルが適用されます。

プラットフォーム間の互換性を確保するために、さまざまなブラウザでサポートされているカーソル キーワードのリストをオンラインで見つけることができることに注意してください。

以上がCSS、特に Firefox でカスタム カーソル画像を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート