CSSのカーソルの変更ができない件について

Question

 .screen{
      cursor: url(Smile.ani);
    }

cssでカーソルを変えようとしましたが、なぜか変更されません。また、使っているブラウザはChromeなのでうまく表示されるはずですが、できません。

なにかカーソルの設定についてについてほかにルールがあるのでしょうか？それともただ単に自分のコードが間違っているのでしょうか？

教えていただけると幸いでございます。

Answer 1

対応していない拡張子ファイル形式だからです。.curや.pngあたりなら多くのブラウザで対応しています。

【cursor プロパティでの URL 値の使用 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property#Browser_compatibility

Comments

[prog.henry]

ご返信ありがとうございます。
Chromeではaniは対応していないのですか！？

.curで試してみます。

[prog.henry]

ファイル形式を変換してみましたがいずれもうまくいきませんでした。
また、後ろにcrosshairもいれましたがマウスの形はcrosshairになりませんでした。

そのため動作しない理由がわかりません...
ないとは思いますが画像ファイルはhtmlと同じフォルダ内にあったらだめなのですか？

cursor: url(smile.png) 4 12, crosshair;

cursor: url(smile.cur) 4 12, crosshair;

[kei344]

「smile.png」をどうやって作ったかはわかりませんが、ファイル形式が間違っているか、CSSのあるフォルダ内に入っていないかどちらかではないでしょうか。
https://jsfiddle.net/14mwbhtd/

[prog.henry]

記載されたコードの中にある画像をダウンロードして
そのダウンロードした画像を表示させたらうまくいきました。

でもやっぱり自分がつくったやつはだめでした。
そこでソフトを使って、自分で作ったやつのpxの値を40×40にするとできました。

たぶん大きさのルールがあるのだと思っています。
丁寧な対応を本当にありがとうございました！

[kyoya0819]

ちなみにどのくらいのサイズのを使おうとしましたか？

[prog.henry]

もとは672×448です。

[kyoya0819]

画像のサイズが大きすぎるからです。

https://developer.mozilla.org/ja/docs/Web/CSS/cursor#Usage_notes

おそらくこのサイズ規定に引っ掛かったため、表示されなかったと推測できます。

[kyoya0819]

https://webplatform.github.io/docs/css/properties/cursor/
> Cursor size: if the cursor image is over a certain size it will be ignored (in Gecko for example the limit is 128×128px). You should limit yourself about 32×32px anyway, for maximum compatibility with operating systems and platforms.

要は
「Geckoの場合は最大128pxだよ！だけど、32pxくらいに収めた方がいいよ！」
という意味です。

Geckoは現状、Lunascapeなどのブラウザに搭載されていますがその他のブラウザでも大まか同じぐらいの制限だと思われます。

（日本語版がありました
（https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property

[prog.henry]

なるほど！そうだったんですね。
自分の好きなサイズじゃだめだったんですね。お忙しい中のご返信ありがとうございました。