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

Webでaやbutton要素以外でマウスポインタの形を変える方法

本来マウスポインタがカーソルやテキスト入力の形になる入力フォームをポイントしたときに、前述の2種類のポインタ以外のポインタになるようにしてほしいという要望があったのですが、今までマウスポインタの形は意識したことがなかったので、”そういえばどうやるんだろう…”と思い調べてました。

javascriptで制御するのだろうかと思ったらなんとcssのみでサクッと制御できました。

cursor …… カーソルの形状を指定する – HTML クイックリファレンス

使い方は超簡単。

ポイントされたときにマウスカーソルの種類を変更したい要素に対して、cssでカーソルの種類を指定するだけです。

#hoge {
    cursor: pointer; //カーソルが指マークになる
}

これでid=”hoge”の要素をポイントしたときに、要素がテキスト入力エリアだったとしても、imgタグだったとしても、マウスカーソルが指マークになります。

cssでこんな操作もできるとは…恥ずかしながら知りませんでした(;´∀`)

他にもいろいろなカーソルを指定できますので、興味のある方は是非いろいろ試してみてください。

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