cursorとは、マウスカーソルのデザインを変化させるCSSプロパティです。特定の要素にカーソルが乗った時に、指の形などにすることができます。
cursor: typetype には次のうちいずれかを指定する。
以下の値から選択するか、URLを指定します。
| 値 | 意味 |
|---|---|
| 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 | 右(east)リサイズ |
| n-resize | 上(north)リサイズ |
| ne-resize | 右上(north west)リサイズ |
| nw-resize | 左上(north west)リサイズ |
| s-resize | 下(south)リサイズ |
| se-resize | 右下(south east)リサイズ |
| sw-resize | 左下(south west)リサイズ |
| w-resize | 左(west)リサイズ |
| ew-resize | 左右(east west)リサイズ |
| ns-resize | 上下(north south)リサイズ |
| nesw-resize | 右上から左下(north east to south west)リサイズ |
| nwse-resize | 左上から右下上下左右(north west to south east)リサイズ |
| col-resize | 水平方向にサイズが変更できることを表わす |
| row-resize | 垂直方向にサイズが変更できることを表わす |
| all-scroll | 全スクロール |
| zoom-in | 拡大が可能であることを表わす |
| zoom-out | 縮小が可能であることを表わす |
次にスタイルシート属性cursorを使用したHTMLの例を示します。
<p style="cursor: crosshair;">crosshair</p>
<p style="cursor: default;">default</p>
<p style="cursor: pointer;">pointer</p>
<p style="cursor: move;">move</p>
<p style="cursor: text;">text</p>
<p style="cursor: vertical-text;">text</p>
<p style="cursor: wait;">wait</p>
<p style="cursor: help;">help</p>
<p style="cursor: n-resize;">n-resize</p>
<p style="cursor: ne-resize;">ne-resize</p>
<p style="cursor: e-resize;">e-resize</p>
<p style="cursor: se-resize;">se-resize</p>
<p style="cursor: s-resize;">s-resize</p>
<p style="cursor: sw-resize;">sw-resize</p>
<p style="cursor: w-resize;">w-resize</p>
<p style="cursor: nw-resize;">nw-resize</p>
<p style="cursor: cell;">cell</p>
<p style="cursor: none;">none</p>
<p style="cursor: not-allowed;">not-allowed</p>
<p style="cursor: grab;">grab</p>
<p style="cursor: grabbing;">grabbing</p>
<p style="cursor: zoom-in;">zoom-in</p>
<p style="cursor: zoom-out;">zoom-out</p>
<p style="cursor: alias;">alias</p>
<p style="cursor: copy;">copy</p>
<p style="cursor: col-resize;">col-resize</p>
<p style="cursor: row-resize;">row-resize</p>実際の表示見本です。各単語にマウスカーソルを合わせると、マウスカーソルの形状が変化します。
crosshair
default
pointer
move
text
vertical-text
wait
help
n-resize
ne-resize
e-resize
se-resize
s-resize
sw-resize
w-resize
nw-resize
cell
none
not-allowed
grab
grabbing
zoom-in
zoom-out
alias
copy
col-resize
row-resize
JavaScriptでcursorを指定するには、styleオブジェクトを使用する。
var element = document.getElementById('example');
element.style.cursor = 'pointer';World Wide Web Consortium (2018) CSS Basic User Interface Module Level 3 (CSS3 UI)