CSS、特に 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 サイトの他の関連記事を参照してください。