画像拡大用のカスタム カーソル画像が Firefox で機能しないのはなぜですか?

画像拡大用のカスタム カーソル画像

デフォルトのカーソルを拡大鏡などのカスタム画像に置き換えてユーザー エクスペリエンスを向上させることを目的とする場合特定の画像要素の上にマウスを移動するときにガラスを使用する場合、CSS が解決策を提供します。ただし、予期しない動作が発生する可能性があります。

この例では、カーソル URL は CSS を使用して定義されています:

a.heroshot img {
  cursor:url(/img/magnify.cur), pointer;
}

magnify.cur カーソルは正しく配置されていますが、このコードは効果的にレンダリングされません。調査の結果、この動作は Mac プラットフォーム上の Firefox との互換性の問題に起因することが判明しました。 Firefox の場合、JavaScript ソリューションまたは代替アプローチが必要です。

Firefox の互換性

Firefox の場合、カーソル URL メカニズムはサポートされていません。代わりに、「-moz-zoom-in」キーワードを使用して同様の効果を実現できます。

cursor:url(/img/magnify.cur), -moz-zoom-in, auto;

この変更により、Firefox は magnify.cur の表示を優先し、Mozilla 固有の表示がそれに続きます。ズーム カーソル、またはフォールバック システム カーソル。

ブラウザの互換性

カーソル キーワードとそのサポートはブラウザによって異なります。包括的なリファレンスについては、元の回答で提供されているリンクされたリソースを参照してください。このリソースには、さまざまなブラウザーの互換性のあるカーソル キーワードが詳しく記載されています。

以上が画像拡大用のカスタム カーソル画像が Firefox で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。