CSS でカーソルをハンドポインタに変更

1. CSS で cursor プロパティを使用してマウスポインタをハンドポインタに変更する
2. CSS で cursor プロパティの url() 関数を使用してマウスポインタをカスタムハンドポインタに変更する

この記事では、CSS の項目を一覧表示するためにマウスを移動しながら、マウスポインターをハンドポインターに変更する方法を紹介します。

CSS で cursor プロパティを使用してマウスポインタをハンドポインタに変更する

CSS の cursor プロパティを使用して、特定の要素をポイントしたときのマウスポインタの表示方法を変更できます。

たとえば、このプロパティを使用して、cursor プロパティの値を pointer に設定することにより、マウスポインタをハンドポインタに変更できます。CSS で特定の要素を選択し、このプロパティを適用できます。

cursor プロパティには多数のオプションがあります。いくつかのオプションは、help、wait、crosshair、not-allowed、zoom-in などがあります。

たとえば、HTML の ul タグと li タグを使用してリストアイテムを作成し、CSS の li タグを選択して、cursor プロパティを pointer に設定します。マウスポインタをリストアイテムに移動すると、マウスポインタがポインティングハンドに変わります。

このようにして、CSS でマウスポインタをハンドポインタに変更できます。

サンプルコード：

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: pointer;
}

CSS で cursor プロパティの url() 関数を使用してマウスポインタをカスタムハンドポインタに変更する

CSS の cursor プロパティの url() 関数を使用して、カスタムハンドポインタを追加することもできます。

url() 関数で画像の URL を指定する必要があります。フォールバックとして複数の URL を指定して、一方が機能しない場合にもう一方が機能するようにすることができます。

複数の url() 関数はコンマで区切られます。マウスポインタを特定の要素に移動すると、カスタムポインタが表示されます。

関数でカスタムハンドポインタの URL を設定して、CSS でマウスポインタをハンドポインタに変更できます。

たとえば、デモンストレーションの最初の方法と同じリストを使用します。CSS で、li タグを選択し、cursor プロパティを記述し、cursor プロパティを url() 関数に設定します。ここで、URL https://img.icons8.com/nolan/32/hand-cursor.png はパラメータです。次に、フォールバックとしてコンマの後に auto を書き込みます。

したがって、url() 関数を使用してカスタムハンドポインターを作成し、CSS のリストにカーソルを合わせて表示できます。

サンプルコード：

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: url("https://img.icons8.com/nolan/32/hand-cursor.png"), auto;
}