[CSS] マウスカーソルのスタイルを指定する
マウスカーソルのスタイルを指定するには、「cursor」を使用します。
構文
cursor:＜スタイルの種類＞;
スタイルの種類については、以下「cursorの種類」をご覧ください。
サンプルソース
例）カーソルを十字ポインタにする
|
1 2 3 |
<div style="cursor:crosshair;"> ここにカーソルを当てると十字ポインタになります。 </div> |
【結果】
ここにカーソルを当てると十字ポインタになります。
cursorの種類
カーソルには以下の種類があります。
サンプル列にカーソルを合わせるとポインターが変わります。
| 値 | サンプル | メモ |
|---|---|---|
| auto | 自動（デフォルト） | |
| pointer | 指（リンク） | |
| text | テキスト | |
| wait | 処理中 | |
| crosshair | 十字 | |
| move | 十字移動 | |
| help | ？（ヘルプ） | |
| n-resize | 上下リサイズ | |
| s-resize | 上下リサイズ | |
| e-resize | 左右リサイズ | |
| w-resize | 左右リサイズ | |
| ne-resize | 右上左下リサイズ | |
| sw-resize | 右上左下リサイズ | |
| se-resize | 左上右下リサイズ | |
| nw-resize | 左上右下リサイズ |
備考
- ブラウザにより対応しているスタイルが異なるので、ご注意ください。