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 構文:

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 ] ]；

注:

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

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

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