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

takahashi 著者:takahashi

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

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

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

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

使い方は超簡単。

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

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

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

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

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

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

著者について

takahashi

takahashi administrator

Webエンジニア。 趣味で自宅サーバーを稼働中。 ファンタジーが好き。