要素にマウスを乗せたときに表示されるマウスカーソルの形状を指定します。
| 値 | 説明 |
|---|
| <uri> | カーソルの画像ファイルをURLを指定します。 |
| <x> <y> | 画像を表示する際の横方向、縦方向のオフセット値を指定します。サポートしているブラウザはまだ少ないようです。 |
| <cursor-type> | カーソル形状を指定します。下記を参照してください。 |
カーソル形状の意味と、各ブラウザでの対応状況を下記に示します。
| カーソル形状 | 説明 |
IE9 | Fx12 | Ch12 | Op11.6 | Sa5.1 |
|---|
| 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 | ズームアウトカーソル | － | － | － | ○ | － |
カーソル画像をURLで指定する際は、カンマでいくつかの画像ファイルを指定します。下記の例では、myhelp.cur を探し、サポートされていない、または見つからなかった場合は myhelp.gif を探し、これも表示できない場合は help カーソルを表示します。IE9 は .ani, .cur、Firefox 12, Chrome 12, Safari 5.1 は .cur, .gif, .png, .jpg, .bmp、Opera 11.6 は未対応のようです。
.sample { cursor: url(myhelp.cur), url(myhelp.gif), help; }
HTML
<div style="cursor:url(../image/sample.cur), auto">url</div>
<div style="cursor:auto">auto</div>
<div style="cursor:default">default</div>
<div style="cursor:none">none</div>
<div style="cursor:context-menu">context-menu</div>
<div style="cursor:help">help</div>
<div style="cursor:pointer">pointer</div>
<div style="cursor:progress">progress</div>
<div style="cursor:wait">wait</div>
<div style="cursor:cell">cell</div>
<div style="cursor:crosshair">crosshair</div>
<div style="cursor:text">text</div>
<div style="cursor:vertical-text">vertical-text</div>
<div style="cursor:alias">alias</div>
<div style="cursor:copy">copy</div>
<div style="cursor:move">move</div>
<div style="cursor:no-drop">no-drop</div>
<div style="cursor:not-allowed">not-allowed</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:w-resize">w-resize</div>
<div style="cursor:ew-resize">ew-resize</div>
<div style="cursor:ns-resize">ns-resize</div>
<div style="cursor:nesw-resize">nesw-resize</div>
<div style="cursor:nwse-resize">nwse-resize</div>
<div style="cursor:col-resize">col-resize</div>
<div style="cursor:row-resize">row-resize</div>
<div style="cursor:all-scroll">all-scroll</div>
<div style="cursor:zoom-in">zoom-in</div>
<div style="cursor:zoom-out">zoom-out</div>
表示
url
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