CSSのカーソルとは何ですか?

私たちはすでにカスタマイズされたカーソルを毎日使用しています。このインタラクションは、ボタンの上にマウスを置くとポインタ カーソルが手に変化したり、テキストの上にマウスを置くとカーソルがテキスト カーソルに変化したりするなど、修正されたカーソルを使用することで可能になります。

ただし、カーソルは、ユーザーにさまざまな追加の創造的な機会を与えるために使用されることもあります。

カスタム カーソルの開発を開始する前に、CSS にはよく行われるさまざまなアクション用のデフォルト カーソルがすでに用意されていることを認識しておく必要があります。

これらのカーソルは、カーソルを合わせている正確な位置でのアクションのオプションを提供します。例としては、リンクのクリック、要素のドラッグ アンド ドロップ、オブジェクトのズームインとズームアウトなどを示すカーソルが含まれます。

CSS カーソル プロパティを使用して、必要なカーソルの種類を記述します。

CSS カーソル プロパティ

CSS カーソル プロパティを使用して、ユーザーに表示するカーソルの種類を指定できます。

フォームの送信ボタンとして写真を使用することは、この機能の便利な応用です。デフォルトでは、カーソルがリンクの上にある場合、ポインタの代わりに手が表示されます。ただし、フォームの送信ボタンによってフォームは変更されません。これは、誰かが送信ボタンである画像の上にカーソルを置くと、その画像がクリック可能であることを示す視覚的な合図として機能します。

このプロパティは、コンマで区切られた 0 個以上の値と、その後に必要に応じて 1 つのキーワード値で指定され、それぞれがイメージ ファイルを参照します。

構文

 cursor: value;  

プロパティ値

自動: この属性のデフォルト設定は、カーソルを配置することです。 エイリアス： この属性は、カーソルの作成関連のインジケーターを表示するために使用されます。 全スクロール: この属性のカーソルはスクロールを示します。 細胞： このプロパティのカーソルは、セルまたはセルのグループが現在選択されていることを示します。 コンテキストメニュー： この属性のカーソルは、コンテキスト メニューの存在を示します。 列サイズ変更: カーソルがこのプロパティの列の上にある場合、カーソルのサイズが水平方向に変更されることがあります。 コピー： このプロパティのカーソルは、何かをコピーする必要があることを示します。 十字線: この属性では、カーソルが十字線として表示されます。 デフォルト： デフォルトのカーソル。 電子サイズ変更: この属性のカーソルは、ボックスの右端を移動する必要があることを示します。 サイズ変更: この属性のカーソルは、双方向のサイズ変更カーソルを表します。 ヘルプ： このプロパティでは、カーソルは支援が利用可能であることを示します。 動く： このプロパティのポインタは、何かを移動する必要があることを意味します 。 n-サイズ変更: n-resize プロパティを使用すると、ポインターはボックスの上部境界をシフトする必要があることを示します。 サイズ変更内容: このプロパティを使用すると、カーソルはボックスの端を右と上に移動する必要があることを示します。 新しいサイズ変更: 双方向のサイズ変更カーソルは、この属性によって示されます。 NSリサイズ: 双方向のサイズ変更カーソルは、属性 ns-resize で示されます。 Nw サイズ変更: この属性のカーソルは、ボックスの上端と下端が上と左に移動されることを示します。 鼻のサイズ変更: 双方向のサイズ変更カーソルは、この属性によって示されます。 ノードロップ: この属性のカーソルは、プルされたオブジェクトをこの場所にダンプできないことを示します。 なし： この属性に従って、要素に対してカーソルは表示されません。 禁じられている： このプロパティのカーソルは、要求されたアクションが実行されないことを示します。 ポインタ: このプロパティのカーソルはポインタとして機能し、リンクの進行状況を表示します。 進捗： この属性のカーソルは、プログラムがアクティブであることを示します。 行のサイズ変更: カーソルは、この機能により垂直行のサイズ変更が可能であることを示しています。 Sサイズリサイズ： このプロパティを使用すると、ポインターはボックスの下の境界を下げる必要があることを示します。 サイズ変更: この属性のカーソルは、ボックスの端を右と下に移動する必要があることを示します。 SW サイズ変更: この属性のカーソルは、ボックスの左端と下端を移動する必要があることを示します。 文章： この属性のカーソルは、選択できるテキストを示します。 URL: このプロパティには、カンマで区切られたカスタム カーソル URL のリストと、リストの最後に汎用カーソルが含まれます。 縦書きテキスト: この属性のカーソルは、縦書きテキストの選択の可能性を示します。 W リサイズ: このプロパティを使用すると、ポインターはボックスの左端を移動する必要があることを示します。

例

この例では、カーソル プロパティを利用する方法を示します。カーソル プロパティの値が wait に設定されているため、プログラムはビジー状態です。

 CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p>  

出力

CSS カーソル プロパティを使用して、ユーザーに表示するカーソルの種類を指定できます。フォームの送信ボタンとして写真を使用することは、この機能の便利な応用です。デフォルトでは、カーソルがリンクの上にある場合、ポインタの代わりに手が表示されます。