カーソルの形状を変える実験

下の文字にカーソルを重ねてください。カーソルの形状が変わります。

crosshair(十字印)

default(通常のもの)

pointer(ポインタ)

move(移動用)

e-resize(右リサイズ)

ne-resize(右上リサイズ)

nw-resize(左上リサイズ)

n-resize(上リサイズ)

se-resize(右下リサイズ)

sw-resize(左下リサイズ)

s-resize(下リサイズ)

w-resize(左リサイズ)

text(テキスト選択)

wait(待ち)

help(ヘルプ)

<head>
<style type="text/css">
<!--
.cursor1 {cursor:crosshair}

.cursor2 {cursor:default}
.cursor3 {cursor:pointer}
.cursor4 {cursor:move}
.cursor5 {cursor:e-resize}
.cursor6 {cursor:ne-resize}
.cursor7 {cursor:nw-resize}
.cursor8 {cursor:n-resize}
.cursor9 {cursor:se-resize}
.cursor10{cursor:sw-resize}
.cursor11 {cursor:s-resize}
.cursor12 {cursor:w-resize}
.cursor13 {cursor:text}
.cursor14 {cursor:wait}
.cursor15 {cursor:help}


-->
</head>
<p class="cursor1 ">
crosshair(十字印)</p>
<p class="cursor2 ">
default(通常のもの)</p>
<p class="cursor3 ">
pointer(ポインタ)</p>
<p class="cursor4 ">
move(移動用)</p>
<p class="cursor5 ">
e-resize(右リサイズ)</p>
<p class="cursor6 ">
ne-resize(右上リサイズ)</p>
<p class="cursor7 ">
nw-resize(左上リサイズ)</p>
<p class="cursor8 ">
n-resize(上リサイズ)</p>
<p class="cursor9 ">
se-resize(右下リサイズ)</p>
<p class="cursor10">
sw-resize(左下リサイズ)</p>
<p class="cursor11 ">
s-resize(下リサイズ)</p>
<p class="cursor12 ">
w-resize(左リサイズ)</p>
<p class="cursor13 ">
text(テキスト選択)</p>
<p class="cursor14 ">
wait(待ち)</p>
<p class="cursor15 ">
help(ヘルプ)
</p>
cursor: cursor この要素にマウスを乗せたときのマウスカーソルの形状を
auto(既定値:自動)
crosshair(十字印)
default(通常のもの)
pointer(ポインタ)
move(移動用)
e-resize(右リサイズ)
ne-resize(右上リサイズ)
nw-resize(左上リサイズ)
n-resize(上リサイズ)
se-resize(右下リサイズ)
sw-resize(左下リサイズ)
s-resize(下リサイズ)
w-resize(左リサイズ)
text(テキスト選択)
wait(待ち)
help(ヘルプ)
inherit (継承)
または URL指定のいずれかで指定 する。 <例>
[ヘルプ]