CSSでマウスカーソルの形を変えるにはどうすればいいですか？ (デモンストレーション例)

誰もが主要な Web サイトを閲覧するとき、異なるマウス スタイルが異なるエクスペリエンスをもたらすと思います。この記事では、CSSを使用してマウスの形状を変更する方法を説明します。 CSS カーソル属性 には特定の参考値があります。必要な方は参考にしていただければ幸いです。

エフェクト表示

cursor属性は、表示するカーソルの種類(形状)を指定します。このプロパティは、マウス ポインターが要素の境界内に置かれたときに使用されるカーソルの形状を定義します。すべての主要なブラウザはカーソル属性をサポートしています。

以下では、マウス カーソルの形状変更の具体的な CSS カーソルのサンプル コードを通じて、1 つずつ詳しく紹介します:

html コード: コンテナーを定義します

<div class="content">
			<div class="box box1"><a href="">CSS鼠标手型效果</a></div>
			<div class="box box2"><a href="">CSS鼠标手型效果</a></div>
			<div class="box box3"><a href="">CSS鼠标十字型效果</a></div>
			<div class="box box4"><a href="">CSS鼠标问号效果</a></div>
			<div class="box box5"><a href="">CSS鼠标等待效果</a></div>
		</div>

cursor の手の属性は、マウスに手の形状の効果を表示させます

cursor の pointer 属性を使用すると、マウスに手のエフェクトを表示することもできますが、さまざまなブラウザーと互換性があります。

.box1 a{
				background-color: red;
				cursor:hand;
			}

cursor のクロスヘア属性を使用して、マウスにクロスエフェクト

.box2 a{
				background-color: #DBDBDB;
				cursor:pointer;
			}

cursor のヘルプを表示できるようにすることをお勧めします。属性により、マウスが疑問符効果を表示できるようになります

.box3 a{
				background-color:#777777;
				cursor:crosshair;
			}

cursor の wait 属性により、マウスがローディング効果である待機効果を表示できるようになります

.box4 a{
				background-color:#E6E6E6;
				cursor:help;
			}

cursor 上記のマウス カーソルの形状効果に加えて、次のことを表すカーソル効果もありますさまざまな矢印の方向: e-resize (右矢印)、ne-resize (右矢印)、n-resize (上矢印)、nw-resize (左上矢印)、w-resize (左矢印)、sw-resize (左下矢印)、s-resize (下矢印)、se-resize (右下矢印)。

以上がCSSでマウスカーソルの形を変えるにはどうすればいいですか？ (デモンストレーション例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。