CSS-カーソル

CSSの_cursor_プロパティを使用すると、ユーザーに表示するカーソルのタイプを指定できます。

このプロパティの良い使い方の1つは、フォームの送信ボタンに画像を使用することです。デフォルトでは、カーソルがリンク上に移動すると、カーソルがポインターから手に変わります。ただし、フォームの送信ボタンのフォームは変更されません。したがって、送信ボタンである画像の上に誰かがカーソルを合わせると、画像がクリック可能であるという視覚的な手がかりが得られます。

次の表は、カーソルプロパティの可能な値を示しています-

Sr.No.	Value & Description
1	auto カーソルの形状は、カーソルが置かれているコンテキスト領域に依存します。たとえば、テキストのI、リンクの手などです…
2	crosshair 十字線またはプラス記号
3	default 矢印
4	pointer 指差し（IE 4では、この値は手です）
5	move Iバー
6	e-resize カーソルは、ボックスの端を右（東）に移動することを示します
7	ne-resize カーソルは、ボックスの端を上下（北/東）に移動することを示します
8	nw-resize カーソルは、ボックスの端を上下に移動することを示します（北/西）
9	n-resize カーソルは、ボックスの端を上に移動することを示します（北）
10	se-resize カーソルは、ボックスの端を上下（南/東）に移動することを示します
11	sw-resize カーソルは、ボックスの端を上下に移動することを示します（南/西）
12	s-resize カーソルは、ボックスの端を下（南）に移動することを示します
13	w-resize カーソルは、ボックスの端を左（西）に移動することを示します
14	text Iバー
15	wait 砂時計
16	help ヘルプボタン上での使用に最適な疑問符またはバルーン
17	<url> カーソル画像ファイルのソース

注-これらの値のみを使用して、ユーザーに役立つ情報を追加しようとする必要があり、場所によっては、そのカーソルが表示されることが期待されます。たとえば、誰かがリンクにカーソルを合わせたときに十字線を使用すると、訪問者が混乱する可能性があります。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p>Move the mouse over the words to see the cursor change:</p>

      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>

      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>

      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>

      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html>

それは次の結果を生成します-

Css-cursors

CSS-カーソル