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

CSS カスタム カーソル: Firefox および Chrome の問題のトラブルシューティング

画像を使用して CSS でカスタム カーソルを利用しようとすると、問題が発生する可能性がありますFirefox および Chrome ブラウザーで。あなたが提供したコードは、画像 URL:

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

でプロパティ カーソルを利用します。ただし、このアプローチは前述のブラウザーでは失敗します。この問題に対処するには、次の 2 つの側面を考慮する必要があります。

1. 画像ファイル:
   提供された画像が大きすぎます。画像のサイズを変更します。できれば小さいサイズ (例: 32px) に変更します。通常、この変更により問題は解決されます。
2. CSS コード:
   画像 URL に加えて、カーソル プロパティにはカーソルの種類を指定する 2 番目の引数が必要です。この場合、「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 サイトの他の関連記事を参照してください。