CSSを使用してマウスを小さな手のように見せる方法-CSSチュートリアル-php.cn

CSSを使用してマウスを小さな手のように見せる方法

青灯夜游

リリース： 2023-01-03 09:27:51

オリジナル

44893 人が閲覧しました

CSS では、cursor 属性を使用してマウスを小さな手のスタイルに変更できます。基本的な構文は「cursor:pointer;」です。カーソル属性は、マウスポインタが要素の境界内に置かれたときに使用されるカーソルの形状を定義します。値を「pointer」に設定すると、マウスが小さくなります。

CSSを使用してマウスを小さな手のように見せる方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css マウスが小さくなります

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			p{
				border: 1px solid red;
			}
			#cursor2{
				cursor:pointer;/*鼠标变小手*/
				}
		</style>
	</head>
	<body>
		<p id="cursor1">测试文本！</p>
		<p id="cursor2">测试文本！</p>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSを使用してマウスを小さな手のように見せる方法

#css カーソル属性

cursor 属性は、マウスポインターが要素の境界内に置かれたときに使用されるカーソルの形状を定義します [推奨チュートリアル:

CSS ビデオチュートリアル ]

属性値:

#値説明##url使用するカスタムカーソルの URL。 defaultauto十字線#pointerカーソルは、リンクを示すポインタ (手) として表示されます。このカーソルは、オブジェクトが移動できることを示します。このカーソルは、長方形のボックスの端を右 (東) に移動できることを示します。このカーソルは、長方形の端を上および右 (北/東) に移動できることを示します。このカーソルは、長方形の端を上と左 (北/西) に移動できることを示します。このカーソルは、長方形のボックスの端を上 (北) に移動できることを示します。このカーソルは、長方形の端を下と右 (南/東) に移動できることを示します。このカーソルは、長方形の端を下と左 (南/西) に移動できることを示します。このカーソルは、長方形のボックスの端を下 (南) に移動できることを示します。このカーソルは、長方形のボックスの端を左 (西) に移動できることを示します。 #textこのカーソルはテキストを示します。 waitこのカーソルは、プログラムがビジー状態であることを示します (通常は時計または砂時計)。 helpこのカーソルは、利用可能なヘルプ (通常は疑問符または吹き出し) を示します。プログラミングビデオをご覧ください。！


	注: URL で定義された使用可能なカーソルがない場合に備えて、このリストの最後に通常のカーソルを常に定義してください。
デフォルトのカーソル (通常は矢印)
Default 。ブラウザによって設定されたカーソル。
カーソルは十字線として表示されます。
	#move
	e-resize
	ne-resize
	nw-resize
	n-resize
	se-resize
	sw-resize
	s-resize
	w-resize



	プログラミング関連の知識について詳しくは、