スポンサード リンク
cursorプロパティ
要素の上にカーソルが重なったとき、マウスポインタの形を指定できます使い方(書式)
セレクタ { cursor: 値; }
cursorプロパティ
対応ブラウザ | |
適用できる要素 | 全てのhtml要素 |
子要素へのスタイルの継承 | しない |
プロパティの値 | 説明 |
auto | ブラウザが自動でマウスカーソルの形を決める。初期値 |
default | 通常のマウスカーソル |
help | ヘルプ用のマウスカーソル |
pointer | 指の形のマウスカーソル |
progress | 進行中を表すマウスカーソル |
wait | 待機中、待ち状態のマウスカーソル、砂時計の形 |
crosshair | 十字線のマウスカーソル |
text | テキスト選択用のマウスカーソル |
move | 移動用のマウスカーソル |
e-resize | 右辺のサイズ変更用のマウスカーソル |
w-resize | 左辺のサイズ変更用のマウスカーソル |
n-resize | 上辺のサイズ変更用のマウスカーソル |
s-resize | 下辺のサイズ変更用のマウスカーソル |
ne-resize | 右上のサイズ変更用のマウスカーソル |
nw-resize | 左上のサイズ変更用のマウスカーソル |
se-resize | 右下のサイズ変更用のマウスカーソル |
sw-resize | 左下のサイズ変更用のマウスカーソル |
url(ファイル名.cur,auto) | オリジナルのマウスカーソルを使う。IEとFirefoxが対応 |
none | マウスカーソルを非表示。IE8以前は未対応 |
実際の指定方法
.hoge { cursor: help; }
.hoge2 { cursor: pointer; }
.hoge3 { cursor: progress; }
.hoge4 { cursor: wait; }
.hoge5 { cursor: crosshair; }
.hoge6 { cursor: text; }
.hoge7 { cursor: move; }
.hoge8 { cursor: e-resize; }
.hoge9 { cursor: w-resize; }
.hoge10 { cursor: n-resize; }
.hoge11 { cursor: s-resize; }
.hoge12 { cursor: ne-resize; }
.hoge13 { cursor: nw-resize; }
.hoge14 { cursor: se-resize; }
.hoge15 { cursor: sw-resize; }
.hoge16 { cursor: url(hoge.cur); }
.hoge17 { cursor: none; }
html部分
<p class="hoge">help</p> <p class="hoge2">pointer</p> <p class="hoge3">progress</p> <p class="hoge4">wait</p> <p class="hoge5">crosshair</p> <p class="hoge6">text</p> <p class="hoge7">move</p> <p class="hoge8">e-resize</p> <p class="hoge9">w-resize</p> <p class="hoge10">n-resize</p> <p class="hoge11">s-resize</p> <p class="hoge12">ne-resize</p> <p class="hoge13">nw-resize</p> <p class="hoge14">se-resize</p> <p class="hoge15">sw-resize</p> <p class="hoge16">url(hoge.cur)</p> <p class="hoge17">none</p>
実際の表示 マウスカーソルを合わせてください
help
pointer
progress
wait
crosshair
text
move
e-resize
w-resize
n-resize
s-resize
ne-resize
nw-resize
se-resize
sw-resize
url(hoge.cur)
none