ホームページ  >  記事  >  ウェブフロントエンド  >  CSSを使用してマウスを小さな手のように見せる方法

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

青灯夜游
青灯夜游オリジナル
2021-03-04 17:43:1744862ブラウズ

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
プログラミング関連の知識について詳しくは、

以上がCSSを使用してマウスを小さな手のように見せる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。