CSSのカーソル属性の設定方法

多くの友人は、CSS のカーソル属性の設定方法についてあまり明確ではありません。今日は、カーソル属性とその構文、およびカーソル属性を理解するのに役立つ短い例を紹介します。

DIV CSS をレイアウトしていると、マウスがポインターを通過して指の形に変化するなど、オブジェクト内でマウス ポインター カーソルのコントロールに遭遇します。 次に、マウス ポインター スタイルのカーソル コントロールを紹介します。 。システムのデフォルトのマウス ポインター スタイルに加えて、CSS を通じて 画像 をマウス ポインターとして設定することができます。もちろん、これはマウス ポインターにさまざまな小さな画像スタイルを設定するのが一般的です。 CSSカーソルによるスタイル。

カーソル : 自動 | カーソル移動 | s-resize | sw-resize | -resize | nw-resize |pointer (url)

一般的に使用されるカーソル カーソルの説明

1)、div{cursor:default } のデフォルトは通常のマウス ポインターです

2)、div{cursor:hand } および div{カーソル:テキスト } テキスト選択効果

3)、div{ カーソル:移動 } 移動選択効果

4)、div{ カーソル:ポインタ } 指の形のリンク選択効果

5)、div{ カーソル:url(url 画像address) }オブジェクトを画像として設定します

マウス ポインタの説明

cursor オブジェクト上を移動するマウス ポインタによって使用されるシステムの事前定義されたカーソル形状を設定または取得します。

レイアウト構造

p { カーソル: テキスト; } /* css

コメント

: マウスが html p オブジェクトに移動したときにテキスト選択スタイルに変更されるように設定します*/a { カーソル: ポインター; } / * css コメント: マウスが

hyperlink

オブジェクト (リンク選択) に移動したときにマウスが指の形に変化するように設定します */body {cursor: url("small picture address")} /* マウス ポインターを設定しますデフォルトで小さな画像に */

詳細な読み方: css a、css a link、a hover、css hyperlink style

マウス ポインター スタイルの概要

マウス ポインター スタイルのコントロール設定は、たとえば、DIV をレイアウトする場合に比較的一般的です。 +CSS 毎日、マウスがポイントするようにしたいのですが、ローカル スパンがオブジェクトにラベルを付けると、マウス ポインタが指の状態に変わります。このとき、cursor: ポインタをオブジェクト スパンに設定するだけです。上の図は、一般的に使用されるマウス カーソルの形状と CSS ワードを示しています。レイアウト時にマウス ポインターのスタイルを設定できることを願っています。カーソルを乱用したり、カスタム イメージをマウス スタイルとして簡単に設定したりしないでください。これにより、Web ページが複雑になり、ユーザー エクスペリエンスと矛盾することになりますので、注意して使用してください。

この紹介の後、誰もがカーソル属性についてより深く理解できるようになると思います。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注目ください。

関連記事:

div フローティング レイヤーとデフォルトの div レイヤーの関係は何ですか?

DIV に設定されている CSS 属性スタイルを確認するにはどうすればよいですか?

ブラウザがhtml5をサポートしているかどうかを確認する方法

以上がCSSのカーソル属性の設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。