cursor

/* キーワード値 */
cursor: pointer;
cursor: auto;

/* URL とキーワードによる代替 */
cursor: url(hand.cur), pointer;

/* URL と座標とキーワードによる代替 */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* グローバル値 */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: unset;

cursor プロパティはゼロ個以上の <url> をカンマで区切ったものと、それに続く必須のキーワード値によって指定します。それぞれの <url> は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。

それぞれの <url> には空白で区切った 2 つの数値を続けることができ、<x><y> 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。

例えば、これは <url> 値を使用して 2 つの画像を指定し、<x><y> 座標を 2 つ目に設定し、どちらの画像も読み込めなかったときは progress キーワードで代替されるように指定しています。

cursor: url(one.svg), url(two.svg) 5 5, progress;

• <url> url(…) の形式か、またはカンマ区切りのリスト url(…), url(…), … で画像の URL を指定します。複数の url() の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。詳細は cursor プロパティにおける URL 値の使用を参照して下さい。
• <x> <y> Experimental
  • : 任意で x 座標と y 座標を指定します。2 つの 32 未満の非負数で、単位なしです。
• キーワード値
  • : 値の上にマウスを当てると、各項目の実際の表示を確認できます。

    カテゴリー	CSS 値	例	説明
    一般	auto		現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には text キーワードを指定した場合と同様です。
    	default		プラットフォームに依存する既定のカーソルです。ふつうは矢印です。
    	none		カーソルを表示しません。
    リンクおよび状態	context-menu		コンテキストメニューが利用できることを示します。
    	help		ヘルプが使用可能であることを示します。
    	pointer		カーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。
    	progress		プログラムがバックグラウンドでビジー状態であるが、(wait とは異なり) ユーザーがインターフェイスを操作可能であることを示します。
    	wait		プログラムがビジー状態で、(progress とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。
    選択	cell		表のセルまたは一連のセルが選択できることを示します。
    	crosshair		十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。
    	text		テキストを選択可能であることを示します。通常、I ビームが表示されます。
    	vertical-text		縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。
    ドラッグ＆ドロップ	alias		エイリアスやショートカットが作成されることを示します。
    	copy		何かがコピーされることを示します。
    	move		何かが移動されることを示します。
    	no-drop		現在の位置にアイテムがドロップできないことを示します。 [Firefox バグ 275173](https://bugzil.la/275173): Windows および Mac OS X では、no-drop は not-allowed と同じです。
    	not-allowed		要求された操作が受け付けられないことを示します。
    	grab		何かをグラブ (移動のためにドラッグ) することができることを示します。
    	grabbing		何かをグラブ (移動のためにドラッグ) していることを示します。
    サイズ変更＆スクロール	all-scroll		何かが任意の方向にスクロール (パン) 可能であることを示します。 [Firefox バグ 275174](https://bugzil.la/275174): Windows では、 all-scroll は move 同じです。
    	col-resize		アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。
    	row-resize		アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。
    	n-resize		辺が移動できることを表します。例えば、se-resize のカーソルはボックスの*南東* (south-east) の角から移動を開始した時に使われます。 環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 n-resize と s-resize は ns-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

仕様書では cursor について寸法の制限は定義されていませんが、それぞれのユーザーエージェントには制限がある場合があります。ブラウザーが対応している寸法の範囲を超えた画像を使用してカーソルを変更しようとすると、一般的には単に無視されます。

カーソルの寸法の制限に関するメモは、ブラウザーの互換性の表をチェックしてください。

cursor = 
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | 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 ]  

<url> = 
  url( <string> <url-modifier>* )  |
  src( <string> <url-modifier>* )  

• cursor プロパティにおける URL 値の使用
• pointer-events
• url() 関数