cursorの使い方

cursor

プロパティの説明

cursorは、マウスカーソルの形状を指定するプロパティです。全ての要素に指定することができます。

指定できる値

auto: 標準設定。状況により適切なカーソルを表示します。
default: 矢印を表示します。
pointer: 手の形を表示します。
text: I型を表示します。
wait: 砂時計を表示します。
help: 矢印の隣に?を表示します。
crosshair: 十字を表示します。
move: 十字型矢印を表示します。
n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, e-resize, w-resize: n：北、s：南、e：東、w：西への両方向矢印を表示します。

サンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title>サンプルページ</title>
 <style type="text/css">
 <!--
 .c1{cursor:default;}
 .c2{cursor:pointer;}
 .c3{cursor:text;}
 .c4{cursor:wait;}
 .c5{cursor:help;}
 .c6{cursor:crosshair;}
 .c7{cursor:move;}
 .c8{cursor:n-resize;}
 .c9{cursor:ne-resize;}
 .c10{cursor:nw-resize;}
 .c11{cursor:e-resize;}
 -->
 </style>
</head>

<body>
 <h1>サンプルページ</h1>
 <ul>
  <li class="c1">マウスを上に乗せた時、矢印を表示。</li>
  <li class="c2">マウスを上に乗せた時、手の形を表示。</li>
  <li class="c3">マウスを上に乗せた時、I型を表示。</li>
  <li class="c4">マウスを上に乗せた時、砂時計を表示。</li>
  <li class="c5">マウスを上に乗せた時、矢印の隣に?を表示。</li>
  <li class="c6">マウスを上に乗せた時、十字を表示。</li>
  <li class="c7">マウスを上に乗せた時、十字型矢印を表示。</li>
  <li class="c8">マウスを上に乗せた時、上下矢印を表示。</li>
  <li class="c9">マウスを上に乗せた時、右斜め矢印を表示。</li>
  <li class="c10">マウスを上に乗せた時、左斜め矢印を表示。</li>
  <li class="c11">マウスを上に乗せた時、左右矢印を表示。</li>
 </ul>
</body>

</html>