cursorプロパティ

cursorプロパティは、要素にマウスを合わせたときのカーソルの外観を設定します。

構文

セレクタ {
	cursor: 値;
}

このプロパティは非常に多くの値を持っています。以下では、理解しやすくするためにこれらの値をグループ分けしました。カーソルの外観はブラウザによって異なるため、写真の代わりに、値の表に特別な列を設けました。この列のセルにマウスを合わせると、説明されているカーソルの外観を確認できます。

値	説明	外観
`default`	矢印の形をした標準の外観。
`pointer`	要素がアクティブでクリック可能であることを示すために使用します（リンクのデフォルト）。
`help`	要素に関連するヘルプや質問があることを示すために使用します。
`not-allowed`	操作が許可されていないことを示すために使用します。

値	説明	外観
`text`	垂直バーの形をした標準のテキストカーソル。
`vertical-text`	縦書きテキスト用のテキストカーソル。

値	説明	外観
`progress`	何らかの操作が進行中であり、ユーザーが待機する必要があることを示すために使用します。
`wait`	ユーザーが待機する必要があることを示すために使用します。

要素のサイズを変更する際の値は、次のように形成されます：単語 resize の前にハイフンで区切って1文字または複数の文字を付けます。例： n-resize や ne-resize。

これらの文字は方角の頭文字です：north - 北、south - 南、east - 東、west - 西。ここでは地図の慣例が使用されています：上が北、下が南、左が西、右が東です。もちろん、これは混乱を招きますが、仕様に従って使用する必要があります:)

では、値は以下の通りです：

値	説明	外観
`col-resize`	水平方向の変更。
`row-resize`	垂直方向の変更。

値	説明	外観
`zoom-in`	ズームイン。
`zoom-out`	ズームアウト。

値	説明	外観
`move`	要素が移動可能であること、または移動中であることを示すために使用します。
`all-scroll`	要素がマウスで全方向にスクロール可能であることを示すために使用します。

値	説明	外観
`crosshair`	照準器のような外観。
`cell`	照準器のような外観。