cursor
マウスカーソルの種類を指定するプロパティ。
cursorの値を指定することで、マウスカーソルを載せた際のカーソルの種類を選択することができる。
値
| auto | 自動（ブラウザに依存する） | default | 標準カーソル | pointer | リンク部と同様の「指マーク」 | crosshair | 十字マーク | move | ウインドウ移動時と同様の「十字矢印」 | text | テキスト選択字と同様の「Iマーク」 | wait | 砂時計マーク | help | 矢印＋？マーク | n-resize | 上下の矢印マーク | s-resize | 上下の矢印マーク | w-resize | 左右の矢印マーク | e-resize | 左右の矢印マーク | ne-resize | 右上/左下の矢印マーク | se-resize | 左上/右下の矢印マーク | nw-resize | 左上/右下の矢印マーク | sw-resize | 左上/右下の矢印マーク |
|---|
使用例 - サンプル(A) / サンプル(B) / サンプル(C)
サンプル(A)
[CSSの記述]
.sampleA { cursor:pointer; }
[HTMLの記述]
<p class="sampleA">テキストテキストテキスト</p>
[ブラウザ上の表示]
マウスカーソルを乗せると「リンクマーク」に
サンプル(B)
[CSSの記述]
.sampleB { cursor:move; }
[HTMLの記述]
<p class="sampleB">テキストテキストテキスト</p>
[ブラウザ上の表示]
マウスカーソルを乗せると「移動マーク」に
サンプル(C)
[CSSの記述]
.sampleC { cursor:help; }
[HTMLの記述]
<p class="sampleC">テキストテキストテキスト</p>
[ブラウザ上の表示]
マウスカーソルを乗せると「ヘルプマーク」に
- 前の記事：border-spacing
- トップに戻る：カテゴリトップ / サイトトップ