cursorプロパティ

TOPページに戻る > CSS

スポンサード リンク

cursorプロパティ

要素の上にカーソルが重なったとき、マウスポインタの形を指定できます
cursorプロパティを指定していない場合は、ブラウザが自動で判断します。リンクにカーソルを合わせたときは指のカーソルに、テキストにカーソルを合わせたときは選択可能カーソルになるはずです

使い方(書式)

セレクタ { cursor: 値; }                                    

cursorプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全ての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





(C)2012 ホームページ作成無料