cursor プロパティ
cursor プロパティは、ポインターの形状を指定するプロパティです。エレメントごとにポインターの形状が変えられます。
ポインターの形状については以下の値(Values)
を参照してください。
cursor: grab;
詳しくは Example を参照してください
ページ内 Index
構文(Syntax)
CSS
cursor: auto | cursor_name | initial | inherit ;
cursor: <image>, x y, cursor_name;
DOM ( JavaScript )
String = object.style.cursor;
object.style.cursor=" auto | cursor_name | initial | inherit ";
cursor_nameは以下の値(Values)
を参照してください。
値(Values)
以下の表は、ポインターーの形状の一覧です。概要は何を示すかの解説です。
ポインターーの形状については各名称の上にポインターをもっていってみてください。
| Value(cursor_name) | 摘要 |
|---|---|
| auto | 初期値(default値) |
| alias | エイリアスやショートカットの作成 |
| all-scroll | スクロールが可能である場合 |
| cell | <table> といった表でのセル上で |
| context-menu | コンテキストメニューの利用可を示す |
| col-resize | 水平方向(左右方向)にリサイズが可能なら |
| copy | コピー可能であることを示す |
| crosshair | ビットマップ上での選択を示す |
| default | default値。auto と同じ |
| e-resize | 右方向へのリサイズ |
| ew-resize | 左右方向へのリサイズ |
| grab | ドラッグが可能であることを示す |
| grabbing | ドラッグするために掴んだことを示す |
| help | 補足説明があることを示す |
| move | ドラッグ中であることを示す |
| n-resize | 上方向へのリサイズ |
| ne-resize | 右ななめ上方向へのリサイズ |
| nesw-resize | 右上、左下斜め方向へのリサイズ |
| ns-resize | 上下方向へのリサイズ |
| nw-resize | 上左方向へのリサイズ |
| nwse-resize | 右下、左上斜め方向へのリサイズ |
| no-drop | ドロップができない領域であることを示す |
| none | カーソルを表示しません |
| not-allowed | ポインターによる操作を禁止 |
| pointer | リンクを示す |
| progress | 何らかの処理中、ビジー状態を示す。ユーザーによる操作は可能 |
| row-resize | 垂直方向のリサイズ |
| s-resize | 下方向のリサイズ |
| se-resize | 右下方向へのリサイズ |
| sw-resize | 左下方向へのリサイズ |
| text | テキストが選択可能であることを示す |
| URL | URLで指定されたカーソル |
| vertical-text | 縦書きのテキストが選択可能であることを示す |
| w-resize | 左方向へのリサイズ |
| wait | 何らかの処理中、ビジー状態を示す。ユーザーによる操作は不可 |
| zoom-in | ズームイン操作が可能 |
| zoom-out | ズームアウト操作が可能 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
その他に <image> を指定可能です。その場合は、以下のように上記の表示あるポインターーを代替え指定します。
cursor: url('URL'), grab;
備考(Remarks)
| 初期値(Default value) | auto |
| 継承(Inherited) | Yes |
| CSS Animation | No |
Example
cursor プロパティの例です。cursor プロパティを設定したエレメントの上にポインターをもってくると指定したポインター形状に変わります。
