どうも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;と指定することで、ブラウザが判断するカーソルに戻すことができます。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ