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がデフォルト値です。