cursor

概要

CSS の cursor プロパティは、マウスポインターが対象となる要素上に有る時のマウスカーソルを定義します。

構文

[ [ <uri> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]

値

<uri>

任意
url(…) の様な形式か、或いはそれらのカンマ区切りのリスト ( url(…), url(…), … ) で画像の URL を指定。2 つ目以降の <uri> の指定はそれぞれ、前候補の画像形式がサポートされていなかった場合のフォールバックとして機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定した url() 形式の記述は無効となります。詳細については『CSS の cursor プロパティに於ける URL() 値の使用』の頁を参照して下さい。

<x> <y>

カーソルの表示位置の x 座標と y 座標のピクセル値を単位無しで指定（任意）

キーワード値

「値」の列にマウスオーバーすると、各項目の実際の表示を確認できます。

カテゴリー	値	表示	説明
一般	auto		コンテキストに基づき表示するカーソルをブラウザが決定。 ※例えばテキストにマウスオーバーした時には text キーワードを指定した場合と同様の表示結果となるでしょう。
	default		既定のカーソル。矢印の様な形状となる。
	none		カーソルを表示しない。 【訳注: ユーザビリティ上の観点から、この値は特別な理由が無い限り用いるべきではありません。】
リンク及び状態	context-menu		カーソル下でコンテキストメニューが使用可能である事を示す。 Windows 上の Gecko/Firefox には実装されていない バグ 258960 WONTFIX
	help		ヘルプが使用可能である事を示す
	pointer		リンクにマウスカーソルが乗った時など。多くの場合、指差しマークが表示される。
	progress		バックグラウンドでプログラムがビジー状態であるが、まだユーザによる操作が可能である状態を示す（※ wait とは異なる）
	wait		プログラムがビジー状態で、ユーザによる操作が不能である状態を示す（カーソルは砂時計、或いは時計などの図柄となる）
選択	cell		セルを選択できることを示す
	crosshair		十字カーソルは。多くの場合ビットマップの選択を示す為に用いる
	text		テキストを選択可能である事を示す。通常、I ビームが表示される
	vertical-text		縦書きのテキストを選択可能である事を示す。通常、水平の I ビームが表示される
ドラッグアンドドロップ	alias		エイリアスやショートカットが作成される事を示す
	copy		何らかのコピー操作が可能である事を示す
	move		マウスカーソル下のオブジェクトが移動できる可能性がある事を示す
	no-drop		現在の位置にドロップが許可されていないことを示すカーソル。 バグ 275173 Windows に於いて、"no-drop" が "not-allowed" と同じものとなる
	not-allowed		何らかの操作を行う事が出来ない事を示す
リサイズ及びスクロール	all-scroll		任意の方向にスクロール（パン）可能である事を示す バグ 275174 Windows に於いて、"all-scroll" が "move" と同じものとなる
	col-resize		アイテムや列が水平方向にリサイズ可能である事を示す。
	row-resize		アイテムや行が垂直方向にリサイズ可能である事を示す。
	n-resize		エッジが移動可能である事を示す。例えばボックスの右下から動作を開始すると "se-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
掴む	grab		要素を掴む事が出来る事を示す
	grabbing		要素を掴んでいる事を示す

例

実際の表示を確認

.foo { cursor: crosshair; }

/* use prefixed-value if "zoom-in" isn't supported */
.bar { cursor: -webkit-zoom-in;  cursor: -moz-zoom-in;  cursor: zoom-in; } 

/* standard cursor value as fallback for url() must be provided (doesn't work without) */
.baz { cursor: url(hyper.cur), auto }

仕様

ブラウザ実装状況

[1] Windows 上の Mozilla と WebKit では "context-menu" が適用されません。 Opera では問題ありません。
[2] Windows 上の Safari では、 alias、 cell、 copy、 noneが適用されません（Mac は可か？）

関連情報

• CSS の cursor プロパティに於ける URL() 値の使用
• pointer-events
• Webkit's cursor demos （拡張の "zoom"、"zoom-out"、"grab"、"grabbing" を含む）
• Cursor Property (MSDN)
• CSS 2.1 and CSS 3 cursor propery test