cursor

対象となる要素の上にマウスカーソル(マウスポインタ)があるときのマウスカーソルのデザインを変更します。

このプロパティはOSや閲覧しているブラウザによってデザインの差が大きい場合が多々あります。尚、閲覧しているブラウザによっては実行できない値もございますのでご注意ください。

サンプルコード

style.css

/* 基本カーソル */
div.test { cursor: auto;}
div.test1 { cursor: default;}
div.test2 { cursor: help;}

/* クリック可能・操作系 */
.clickable { cursor: pointer;}
.resizable { cursor: col-resize;}
.draggable { cursor: move;}

/* テキスト・入力系 */
.text-field { cursor: text;}
.vertical-text { cursor: vertical-text;}

/* 読み込み中 */
.loading { cursor: wait;}
.loading-area { cursor: progress;}

/* 禁止・十字 */
.disabled-item { cursor: not-allowed;}
.target { cursor: crosshair;}

/* カスタム画像カーソル（フォールバックあり） */
.custom { cursor: url('/img/custom-cursor.png'), auto;}

指定可能な値一覧

値	概要
auto	要素や内容によってカーソルデザインをブラウザが自動決定します。この『auto』が初期値です。
default	規定の矢印カーソルへと変更します。
none	マウスカーソルを表示しません。
context-menu	カーソル下にコンテキストメニューを表示します。
help	カーソルをはてなマークに変更します。
pointer	カーソルを指さしマークに変更します。
progress	プログラムがビジー状態であるかのようなカーソルに変更します。
wait	プログラムがビジー状態であるかのようなカーソルに変更します。
cell	エクセルのようなセルが選択可能であるかのようなカーソルへ変更します。
crosshair	十字のカーソルへ変更します。
text	横書きのテキストが選択可能であるかのようなカーソルへ変更します。
vertical-text	縦書きのテキストが選択可能であるかのようなカーソルへ変更します。
alias	エイリアス(ショートカット)を示すようなカーソルへ変更します。
copy	何らかのコピー動作が可能であるかのようなカーソルへ変更します。
move	上下左右に動かせるようなカーソルへと変更します。
no-drop	ドロップ動作が禁止であるかのようなカーソルへ変更します。
not-allowed	何らかの操作が禁止であるかのようなカーソルへ変更します。
all-scroll	任意の方向にスクロールできるかのようなカーソルへと変更します。
col-resize	水平方向にリサイズできるかのようなカーソルへと変更します。
row-resize	垂直方向にリサイズできるかのようなカーソルへと変更します。
n-resize	カーソルを上方向の矢印へと変更します。
e-resize	カーソルを右方向の矢印へと変更します。
s-resize	カーソルを下方向の矢印へと変更します。
w-resize	カーソルを左方向の矢印へと変更します。
ne-resize	カーソルを右上方向の矢印へと変更します。
nw-resize	カーソルを左上方向の矢印へと変更します。
se-resize	カーソルを右下方向の矢印へと変更します。
sw-resize	カーソルを左下方向の矢印へと変更します。
ew-resize	カーソルを左右方向の矢印へと変更します。
ns-resize	カーソルを上下方向の矢印へと変更します。
nesw-resize	カーソルを右上、左下方向の矢印へと変更します。
nwse-resize	カーソルを左上、右下方向の矢印へと変更します。
zoom-in	ズームインできるかのようなカーソルへと変更します。
zoom-out	ズームアウトできるかのようなカーソルへと変更します。