CSS を使用してさまざまな種類のカーソルを設定するにはどうすればよいですか?

CSS (Cascading Style Sheets) は、カーソルのスタイルなど、Web サイトの外観をデザインするための強力なツールです。カーソルは Web デザインの重要な側面です。これは、ユーザーに視覚的なフィードバックを提供し、効果的な対話を可能にするのに役立ちます。

カーソルとは何ですか?

カーソルは、画面上のユーザーの現在位置を示す位置インジケーターです。 「キャレット」とも呼ばれます。ユーザーインターフェイスのデザインにおいて重要な役割を果たします。 CSS では、必要に応じてカーソルを設定して、特定の場所でどのようなアクションを実行できるかを示す視覚的なフィードバックをユーザーに提供できます。

ここでは、CSS を使用して設定できるさまざまなタイプのカーソルを見ていきます

デフォルトのカーソル

Web デザインでは、デフォルト カーソルは最も一般的なカーソル タイプであり、他のカーソルが指定されていない場合に使用されます。これは画面上では矢印ポインターのように見え、ユーザーが要素をクリックできることを示します。

例 1

ここでは、デフォルトのカーソルを設定する例を示します。

ポインタカーソル

ポインタ カーソルは、リンクを指す手で表されます。ユーザーがリンクの上にマウスを移動すると、その要素がクリック可能であることが示されます。次のコードを使用してポインタ カーソルを設定できます -

テキストカーソル

テキスト カーソルは、I 字型のカーソル ポインタとして表示される、点滅する水平線または垂直線です。ユーザーがテキストまたはテキスト入力フィールドの上にマウスを移動すると、テキストを編集または選択したことを示します。次のコードを使用してテキスト カーソル -

十字カーソル

十字カーソルは、単に十字ポインタの水平線と垂直線として表示されます。十字カーソルは、画像編集ツールなどで画面上の特定の領域を選択するために使用されます。次のコードを使用して十字カーソルを設定できます -

カーソルを移動

モバイル カーソルは、画面上に 4 つの矢印ポインタの形で表示されます。通常、要素をドラッグ アンド ドロップして移動可能であることを示すために使用されます。次のコードを使用して、移動カーソル -

カーソルは使用できません

カーソルは許可されていませんは、要求された操作が実行されないことを示します。対角線のある円の形で表示されます。次のコードを使用して、許可されていないカーソルを設定できます -

進行状況カーソル

進行状況カーソルは回転する円の形で表示されます。これは、プログラムがバックグラウンドでビジー状態であるにもかかわらず、ユーザーがインターフェイスを操作できることを示します。次のコードを使用して進行状況カーソルを設定できます -

カーソルを待つ

カーソルが回転する風車として表示されるまで待ちます。これは、プログラムがビジー状態でユーザー インターフェイスと対話できないことを示します。次のコードを使用して待機カーソル -

ヘルプカーソル

ヘルプ カーソルは疑問符ポインタとして表示されます。ヘルプ アイコンやボタンをクリックするときなど、ユーザーがヘルプを必要とするときに使用されます。次のコードを使用してヘルプ カーソルを設定できます -

例 2

ここでは、CSS を使用してさまざまなタイプのカーソルを設定する方法の例を示します。

CSS を使用してカーソルをカスタマイズする

CSS によって提供される標準カーソルに加えて、カスタム カーソルも使用できます。カスタム カーソルを使用すると、Web サイトに独自のタッチを追加できます。

例 3

以下は、CSS を使用してカスタム カーソルを作成する例です。

上の例では、my-cursor クラスの div 要素を作成しました。次に、cursor プロパティを

https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png)、自動。つまり、ブラウザは、cursor_120340.png ファイルをカスタム カーソルとして使用し、ファイルが見つからない場合、またはロードに失敗した場合は、デフォルトのカーソルに戻ります。 ＃＃＃結論は＃＃＃ ここでは、さまざまなタイプの CSS カーソルについて説明しました。これは、Web デザイナーがカーソル スタイルをカスタマイズし、ユーザー インタラクションに視覚的なフィードバックを提供するための強力なツールです。上記のコードを使用すると、CSS でさまざまな種類のカーソルを設定できます。

以上がCSS を使用してさまざまな種類のカーソルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。