ポインターを画像に置き換えるのってCSSだけで出来るんだ😲

表題の通りです。びっくりです。

画像の準備

カーソルとして使用したい画像を準備します。32x32ぐらいの小さいサイズ推奨です。

CSSでの指定

cursor: pointer;

でお馴染みcursorプロパティを使います。
このプロパティはurl()を使用して画像パスを指定できます。
画像が表示されなかったときのフォールバックとしてautoを設定しておきます。

body{
  cursor: url('path/to/your-image.png'), auto;
}

---

bodyに指定することでサイト全体に適応することができたり、
:hoverと組み合わせる時でマウスオーバー時に適応させたりなどが簡単にできます。