要素にマウスを乗せたときに表示されるマウスカーソルの形状を指定します。
値 | 説明 |
<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