😯
ポインターを画像に置き換えるのってCSSだけで出来るんだ😲
表題の通りです。びっくりです。
画像の準備
カーソルとして使用したい画像を準備します。32x32ぐらいの小さいサイズ推奨です。
CSSでの指定
cursor: pointer;
でお馴染みcursor
プロパティを使います。
このプロパティはurl()
を使用して画像パスを指定できます。
画像が表示されなかったときのフォールバックとしてauto
を設定しておきます。
body{
cursor: url('path/to/your-image.png'), auto;
}
body
に指定することでサイト全体に適応することができたり、
:hover
と組み合わせる時でマウスオーバー時に適応させたりなどが簡単にできます。
Discussion