ホームページ > 記事 > ウェブフロントエンド > 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 の手の属性は、マウスに手の形状の効果を表示させます
.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 サイトの他の関連記事を参照してください。