CSSのカーソル属性とは何ですか？カーソル属性の使用

この記事の内容は、CSSのカーソル属性とは何なのかをご紹介するものです。カーソル属性の使用。困っている友人は参考にしていただければ幸いです。

まず、カーソル属性とは何かを理解しましょう。効果は何ですか？

cursor 属性は、CSS のカーソル属性であり、マウスが application 要素上にあるときに使用できるマウス カーソルの種類を指定します。つまり、カーソルの種類 (形状) を指定します。表示される。

カーソル属性を使用して、カーソルを多くの事前定義されたカーソル タイプの 1 つに設定することも、画像に設定することもできます (次の例のように)。

注: カーソル属性は、ポインティング デバイスを備えたデバイス (マウスなど) に対してのみ有効です。タッチデバイスには影響しません。

カーソル属性は、要素上の特定の機能を提供するために、ユーザーに視覚的なフィードバックと手がかりを提供するために使用されます。これは、より良いユーザー エクスペリエンスを提供するために重要なことがよくあります。

ブラウザとオペレーティング システムによっては、CSS で定義されたカーソル値が異なる効果を示す場合があります。たとえば、一部のブラウザ (Windows 7 の Firefox など) では移動カーソル (通常、要素がドラッグ可能であることを示すために使用されます) が 4 方向の矢印として表示されますが、他のブラウザ (Mac OS X の Firefox など) ではハンドカーソル。この場合、カーソルをすべてのブラウザーやプラットフォームでまったく同じに見える特定のカーソルにしたい場合は、デフォルトの CSS キーワードの代わりに画像を使用するとよいでしょう。

正式な文法

構文:

cursor: [ [<URI> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit ;

初期値: 自動

適用対象: すべての要素

アニメーション: なし

新しい CSS3 構文:

##CSS3 では、追加の値とオプションがカーソル属性に追加されました。見てみましょう:

cursor: [ [ <URI> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]；

注:

1. すべてのブラウザが上記の値をすべてサポートしているわけではなく、すべてのブラウザとオペレーティング システムですべての値が同じに見えるわけではありません。

2. 画像カーソル (カスタム カーソル)

: 1 つ以上のカンマ区切りの参照画像

url( ) は、カーソルとして使用される画像を指します。

cursor：url（例如1：.svg #linkcursor），url（例如2： .cur），auto ;

注: URL 以外の標準カーソル キーワードは、フォールバック リストの最後に指定する必要があります。

: 座標を定義します。

単位のない数値を使用します。負の値は使用できません。これらの値はカーソルのホットスポットの座標を指定します。 。最初の数値は x 座標、2 番目の数値は y 座標です。たとえば、次のようになります。

cursor: url(some-cursor.png) 2 15, pointer;

カーソルのホットスポットを、左上隅 (0,0) から始まる (2,15) ピクセルに設定します。

指定しない場合、ホットスポットの座標はファイル自体 (CUR および XBM ファイルの場合) から読み取られるか、画像の左上隅に設定されます。

画像カーソルを見てみましょう:

3. 一般的に使用されるカーソルの形状

none: かどうかを定義します。カーソルは Display

で、通常は矢印として表示されます。default、auto、context-menu

は通常、手の形として表示されます。ポインタ、グラブ、グラビング、ハンド

help: 通常、疑問符またはバルーンとして表示されます

読み込み待機中: 進行状況 (回転するビーチボール、または時計または砂時計の付いた矢印)、待機 (時計または砂時計)

は方向または移動を示します:

e-resize、ne-resize、n-resize、nw-resize、w-resize、sw-resize、s-resize、se-resize、ew-resize、ns-resize、 nesw-resize、nwse-resize、col-resize、row-resize、、all-scroll、move

は禁止を意味します: no-drop、許可されていません

ブラウザのサポート

次のバージョンがサポートされています:

* は必須のプレフィックスを示します。

要約: 上記はこの記事の全内容です。自分でコンパイルして、cursor 属性の各属性値によって定義されたカーソルの形状を確認することができます。皆様の学習に役立つことを願っています: css3 チュートリアル ! 関連するビデオ チュートリアルをさらにお勧めします。

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