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

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

提供された画像を使用してカスタム カーソルを作成しようとすると、次の問題が発生する可能性があります。 Mozilla Firefox および Google Chrome の機能。これは、次の CSS コードを使用する場合に特に顕著です。

<code class="css">body {
  cursor: url('example-image.png');
}</code>

問題の原因

この問題の主な原因は CSS コード自体にあるわけではありません。むしろ、使用されている画像ファイル内にあります。カスタム カーソルが正しく機能するには、画像のサイズを小さくする必要があります。

解決策

この問題を解決するには、画像のサイズを小さくしてください。 32px以下など。この変更により、カスタム カーソルが Firefox および Chrome で意図したとおりに機能できるようになります。

さらに、カスタム イメージの外観とよりよく一致させるために、「auto」の代わりに「pointer」カーソル タイプを使用することを検討してください。

<code class="css">body {
  cursor: url('example-image.png'), pointer;
}</code>

注

カスタム カーソルでは、元の画像サイズを保持することは不可能であることに注意することが重要です。 Mozilla Developer Network のドキュメント (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property) で説明されているように、最適なパフォーマンスと機能を得るには、画像のサイズを適切に変更する必要があります。

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