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

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

.in-progress {
  cursor: progress;
}

使用可能なカーソル

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

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

自動

デフォルト

無し

リンクカーソル

ポインタ

スクロールカーソル

全スクロール

ステータスカーソル

コンテキストメニュー

ヘルプ

待つ

進捗

選択カーソル

十字線

細胞

文章

垂直テキスト

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

エイリアス

コピー

動く

ノードロップ

禁止されている

ズームカーソル

ズームイン

ズームアウトする

グラブカーソル

掴む

つかむ

カーソルのサイズ変更

e-サイズ変更

n-サイズ変更

ne-resize

nw-サイズ変更

s-サイズ変更

se-サイズ変更

sw-サイズ変更

w-サイズ変更

ew-サイズ変更

ns-サイズ変更

nesw-サイズ変更

nwse-サイズ変更

col-サイズ変更

行のサイズ変更

カスタムカーソル

カスタムカーソルを定義できます。すべてのブラウザがカーソルの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;
}

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

青い液滴カーソル

ブラウザのサポート： 2020年現在、 css3-cursorsを使用できますか？によると、世界中のブラウザの 80％のみがカスタムカーソルをサポートしています。しかし、これは驚くべきことではありません。これをサポートしていないブラウザの多くは、カーソルを使用しないモバイル専用ブラウザです。

結論：

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

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