{cursor:カーソルの種類;}でページ内の 文字やリンク文字にマウスを乗せた時のカーソルの形を変えることができます。

■ カーソルの種類

【ブラウザ表示】

<div class="mouse1">リンク</div>
<div class="mouse2">十字</div>
<div class="mouse3">移動</div>
<div class="mouse4">テキスト</div>
<div class="mouse5">処理中</div>
<div class="mouse6">ヘルプ</div>
<div class="mouse7">リサイズ（上）</div>
<div class="mouse8">リサイズ（下）</div>
<div class="mouse9">リサイズ（右）</div>
<div class="mouse10">リサイズ（左）</div>
<div class="mouse11">リサイズ（右上）</div>
<div class="mouse12">リサイズ（右下）</div>
<div class="mouse13">リサイズ（左上）</div>
<div class="mouse14">リサイズ（左下）</div>

div.mouse1{cursor:pointer;}
div.mouse2{cursor:crosshair;}
div.mouse3{cursor:move;}
div.mouse4{cursor:text;}
div.mouse5{cursor:wait;}
div.mouse6{cursor:help;}
div.mouse7{cursor:n-resize;}
div.mouse8{cursor:s-resize;}
div.mouse9{cursor:e-resize;}
div.mouse10{cursor:w-resize;}
div.mouse11{cursor:ne-resize;}
div.mouse12{cursor:se-resize;}
div.mouse13{cursor:nw-resize;}
div.mouse14{cursor:sw-resize;}

<div style="cursor:pointer;">リンク</div>
<div style="cursor:crosshair;">十字</div>
<div style="cursor:move;">移動</div>
<div style="cursor:text;">テキスト</div>
<div style="cursor:wait;">処理中</div>
<div style="cursor:help;">ヘルプ</div>
<div style="cursor:n-resize;">リサイズ（上)</div>
<div style="cursor:s-resize;">リサイズ（下)</div>
<div style="cursor:e-resize;">リサイズ（右)</div>
<div style="cursor:w-resize;">リサイズ（左)</div>
<div style="cursor:ne-resize;">リサイズ（右上)</div>
<div style="cursor:se-resize;">リサイズ（右下)</div>
<div style="cursor:nw-resize;">リサイズ（左上)</div>
<div style="cursor:sw-resize;">リサイズ（左下)</div>

■ その他の項目

スタイルシート一覧のページに戻る