CSS3スタイル虎の巻

cursor

cursorは、マウスポインターの形を指定するスタイルです。

解説

マウスカーソルの形状を指定することができます。

cursorを指定した要素の上にマウスカーソルが乗った場合に、
カーソルが指定した形状のものになります。

ブラウザにより見た目が異なったり、表示に対応していないものもあります。
表示に対応していない場合は、その状況にあったデフォルトの形状となります。

構文

構文は以下になります。

cursor: 値;

cursorには以下の値が指定できます。

【cursorの種類】
説明
auto自動
defaultデフォルト
pointer指ポインター
crosshair十字
move十字移動
text横書きテキスト
vertical-text縦書きテキスト
wait処理中
helpヘルプ
n-resize上下リサイズ
w-resize左右リサイズ
nw-resize左上-右下リサイズ
sw-resize左下-右上リサイズ
no-dropドロップ禁止
col-resize横方向リサイズ
row-resize縦方向リサイズ

太字の値は初期値です。

サンプル

要素にカーソルが乗った時に「指ポインター」を指定する


.sample01 {
  cursor:pointer;
}

<div class="sample01">指ポインター</div>
指ポインター

上記枠内にカーソルを乗せると指ポインターになります。

備考

  • autoがデフォルト値です。