カスタム CSS カーソルが Firefox と Chrome で機能しないのはなぜですか?

カスタム CSS カーソルが Firefox および Chrome で機能しない

CSS を使用してカーソルをカスタマイズすると、ユニークで魅力的な視覚的なフィードバックが提供され、ユーザー エクスペリエンスが向上します。 。ただし、不一致を避けるためにブラウザ間の互換性を確保することが重要です。

特定のシナリオでは、次のコードを使用してカスタム カーソルを作成します。

<code class="css">body { cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'); }</code>

このコードは機能する可能性がありますが、特定のブラウザでは、Firefox と Chrome で問題が発生します。根本的な理由は、単にコードに 2 番目の引数がないことだけでなく、画像自体のサイズも原因です。

画像のサイズを 32 ピクセルなどの小さいスケールに変更すると、カスタム カーソルが適切に機能できるようになります。また、画像の見栄えを考慮して、「auto」ではなく「pointer」を指定することをお勧めします。

<code class="css">cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer;</code>

注: カスタム カーソルを使用している間、元の画像サイズを維持することはできません。すべてのブラウザでサポートされています。この制限の詳細については、Mozilla Developer Network のカーソル プロパティに関するドキュメントを参照してください。

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