浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】要素にマウスカーソルを乗せたときのポインターの形状を変更する

使用頻度が高くないので、毎回忘れてググっているのでまとめ。
CSS でマウスポインターの形状を変更する方法についてです。
例えば、指定した div 要素にマウスオーバーした際に、ポインターを矢印ではなく指差しのアイコンに変更したい時などに使用します。

ポインターの種類とサンプルについてはこちらを参考にしました。

cursor-スタイルシートリファレンス
http://www.htmq.com/style/cursor.shtml

 

サンプルコードは下記のとおりです。
使用するプロパティは cursor です。

<div id="pointer">
  マウスポインターに「pointer」を指定
</div>
#pointer {
  cursor: pointer;
}

上記を実行すると、div 要素にマウスカーソルを合わせたときに、ポインターが通常の矢印からリンクカーソルに変更されます。
他にも十字カーソルや、ローディングカーソル、移動カーソルにも変更できますので、任意で変更してください。

 

以上、CSS でマウスカーソルを任意の形状に変更する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)