カーソルプロパティを使用してCSSでマウスカーソルを変更する

cursor は、特定の要素でマウスカーソルを変更するために使用されます。 これは、クリック以外のさまざまなタスクを実行できるWebアプリで特に役立ちます。 これは明らかに、ポインティングデバイスがある場合にのみ機能します。

.in-progress {
  cursor: progress;
}

使用可能なカーソル

以下にカーソルを合わせると、デスクトップ/ラップトップコンピューターを使用している場合に使用できるさまざまなカーソルが表示されます。

一般/デフォルトカーソル

リンクカーソル

スクロールカーソル

ステータスカーソル

選択カーソル

カーソルのドラッグアンドドロップ

ズームカーソル

グラブカーソル

カーソルのサイズ変更

カスタムカーソル

カスタムカーソルを定義できます。 すべてのブラウザがカーソルのsvgファイルをサポートしているわけではなく、 .cur ファイルが全面的にサポートされているため、必要に応じて.curフォールバックを提供することをお勧めします。 svgカーソルを使用します。 非カスタムカーソルの1つにフォールバックを提供することもできます。

追加することにより、カーソルホットスポットのカスタム位置を定義できますバツ ＆ y 提供されたカスタムイメージ内のホットスポットの位置の座標。

svgカーソルを使用する場合、svgが持っていることが重要であることに注意してください幅 ＆ 身長ルートsvg要素の値。そうでない場合、カーソルは表示されません。 次の例では、svgファイル（ droplet.svg ）は次のように始まります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" width="42" height="42">...

.custom-cur {
  cursor: url('/images/droplet.svg');
}

/* With a .cur fallback */
.custom-cur {
  cursor: url('/images/droplet.svg'),
  url('/images/droplet.cur');
}

/* With a custom hotspot */
.custom-cur {
  cursor: url('/images/droplet.svg') 10 12;
}

/* With a non-custom fallback: */
.custom-cur {
  cursor: url('/images/droplet.svg'),
  move;
}

カスタムカーソルを使用した例を次に示します。

結論：

カスタムカーソルは、ではないHTML要素がすでにリンクであることを示すために最も一般的に使用されます <a href="..."> クリック可能です。 ただし、リッチWebアプリを構築する開発者に役立つ可能性のあるさまざまな追加の構成可能性を提供します。 カスタムカーソルを使用するときは、次の注意事項に注意してください。

1. ユーザーはほとんどの時間をotherサイトに費やしているため、otherサイトと一貫性のある方法でカスタムカーソルを使用してください。
2. タッチスクリーンユーザー（モバイルおよびタブレット）には、カスタムカーソルは表示されません。