CSS カーソルプロパティの例-CSSチュートリアル-php.cn

CSS カーソルプロパティの例

WBOY

リリース： 2023-09-10 14:53:02

転載

1259 人が閲覧しました

CSS 光标属性示例

CSS カーソルプロパティを使用すると、十字線やプラス記号、ポインターなどを表示できます。次のコードを実行して、CSS でカーソルプロパティを実装してみることができます。 -

Example

<html>
   <head>
   </head>
   <body>
      <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>

ログイン後にコピー

上記に次の値を追加しました -

##自動形状カーソルの位置は、カーソルが配置されているコンテキスト領域の端に依存します。たとえば、テキストの「I」、リンクの「手」などです。 #十字線デフォルト#Pointer指を指す手 (IE 4 では、この値は手です)。移動「I」列e-resizeカーソル表示の端ボックスは右（東）に移動します。 ne-resizeカーソル表示ボックスの端が上と右 (北/東) に移動します。 nw-resizeカーソル表示ボックスの端が上と左 (北/西) に移動します。 n-resizeカーソルは、ボックスの端が上 (北) に移動されることを示します。 se-resizesw-resizes-resizeカーソル表示ボックスの端が左(西)に移動します)。I 列。砂時計。疑問符またはバルーン。ヘルプボタンでの使用に最適です。カーソル画像ファイルのソース。

値	説明

十字線またはプラス記号
矢印






カーソルは、指定されたボックスの端を下と右 (南/東) に移動します。
カーソルはボックスの端を下と左 (南/西) に移動します。
カーソル表示ボックスの端が下(南)に移動します)。	#w-resize
	テキスト
	待っています
	#ヘルプ