どうも7noteです。カーソルの矢印を指の形に変更する方法と、それ以外にもこんなものに変更できる。

初歩的だけど、いつもcursor: pointer;か、pointer: cursor;か忘れてしまう7noteです。

マウスカーソルを手（👆）の形にするには↓↓↓

div {
  cursor: pointer;
}

とすることで、hover時に手の形にすることができます。

/* 上と挙動は同じ */
div:hover {
  cursor: pointer;
}

と書いても同じ挙動になります。

cursor:で変えられるもの一覧

■ デフォルトの矢印

cursor: default;

常に矢印の形になる。

■ 十字形のカーソル（+）

cursor: crosshair;

1px単位とかのより細かい選択をするときとかに使えそう。

■ 移動させる時のカーソル

cursor: move;

コンテンツをドラッグする時のカーソルですね。

■ テキスト編集時のカーソル(I)

cursor: text;

テキストを入力するフォームなどは自動的にこれに変わりますね。

■ 待機モーション（↺）

cursor: wait;

（macで撮影が不可能だったため見本なしです、すみません！）
撮影したらバグりました(笑)。↓

実際はサイモンみたいな丸いアイコン（↺）がカーソルの右下にくるくるしながら出ます。

■ ヘルプマーク・クエスチョンマーク（?）

cursor: help;

脱出ゲームで調べられる箇所とかがこのマークにかわったりしたら面白そう！

■ 上下左右向きの矢印（⬆⬇⬅➡）

cursor: n-resize; /*上(⬆)*/
cursor: s-resize; /*下(⬇)*/
cursor: w-resize; /*左(⬅)*/
cursor: e-resize; /*右(➡)*/

nsweは東西南北の英語の頭文字の意味です。

他にも以下のように書くことで斜め方向にもできます。

cursor: ne-resize; /*右上(➚)*/
cursor: nw-resize; /*左上(↖)*/
cursor: se-resize; /*右下(➘)*/
cursor: sw-resize; /*左下(↙)*/

■ オリジナルの矢印

cursor: url('./images/hogehoge.cur');

オリジナルのカーソルを作ることもできます。
オリジナルカーソルを作れるWEBツールはこちら。

まとめ

指定する事が多いのは圧倒的にcursor: pointer;だけだと思います。
ただ、自動でカーソルは変わっているので見たことあるカーソルもおおかったのではないかなと思います。
カーソルはユーザーが一番目にして見ている場所なので、特に繊細なコーディングを意識して組みたいですね。

もしデフォルトに戻すことがあれば、cursor: auto;と指定することで、ブラウザが判断するカーソルに戻すことができます。

おそまつ！