category -> | | | | | | | |

HTML/CSSで指ポインタカーソルを表示

参考URL 特定の画像や文字の上にカーソルを置いたときに指ポインタに変えたい時がある。
色んな人が色んなやり方を使っていて、最善策を調べるのに時間がかかった。
ようやく理解できたので、画面を遷移させたい時とさせたくない時の両方の処理を併記で解説。
この場合極めて実装が簡単で、aタグのhrefを使えば良い。
下の例では「images/pick/H0006/zunda.png」というずんだもんの画像を用意しそれをimgタグで表示。
それをaタグで囲って、クリックした時にこのサイトのトップページに飛ぶようにしてある。
結果は次の通りで、ずんだもんにカーソルを合わせると指ポインタに変化する。
クリックすれば画面が遷移する。
この場合も全く難しくないが、実装には2通りのパターンがある。
まず1つ目は、aタグだけ書いてhrefは記述しないパターン。
事前にCSS側でaの処理を上書きする必要がある。 結果は次の通りで、ずんだもんの上にカーソルを合わせると指ポインタに変化する。しかしクリックしても画面遷移はしない。
2つ目の方法は、CSSに適当なidもしくはclassを作り、それに対し:hover擬似クラスを作るパターン。
1つ目の方法より面倒だが、たとえば画像のフェード処理など複雑な処理を入れたい場合、こちらの実装を使う必要が出てくる。
下の例では、まずCSS側に#test_zundaというidを定義すると同時に、その:hover疑似クラスにカーソル変更処理を記述しいてる。
HTML側では、CSSで作成しておいた"test_zunda"のidでimgタグを囲う。
結果は次の通り。 画像の時と一緒で、まず一般的な方法だとaタグのhrefで囲む方法がある。
結果は次の通りで、「テストだぜ」の上にカーソルを合わせるとカーソルがポインタに変化する。
そして「テストだぜ」をクリックすればこのサイトのTopページに移動する。
テストだぜ もしhrefによって下線が付いたり、文字色が変わってしまうの嫌なら、スタイルシートで無効化できる。
text-decoration: none;の部分が下線の廃止。
またcolor : #374149;でaタグ内の文字色を上書きしてる。(#374149はこのサイトで採用してる基本の文字色)
HTML側の処理は次の通り。
結果は次のようになり、下線も文字色の変更も無効化している。
しかし実際にクリックしてみると画面の遷移が確認できる。
画像の時と一緒で、aタグだけ書いてhrefを記述しなければ良い。
結果は次の通り。
テストだぜ このサイトの目次のカテゴリ選択では、この方法を利用して特定文字の上にホバーした時のカーソルを変えている。
残念ながら、文字の方は画像の時のような:hover疑似クラスを使っても反映されない。
文字のホバー処理に関しては10人10色で色々な意見があり、調べていく中でかなり雑音だった。
以下に紹介するのは現在では廃れた方法で、わざわざ使う道理はない。
古臭い方法だということを周知させたいのでここに追記。
画面遷移させたくない場合、hrefに"#"を指定するやり方もある。
結果は次の通り。カーソルを合わせるとポインタに変化するが、クリックしても画面遷移はしない。
しかし残念なことに、スクロールが一番上に戻ってしまう。
テストだぜ 更にクリックした後のURLをよく見ると、末尾に「#」の文字列が入ってしまっている。

例えばこのサイトはTomcatサーブレットで実装しているが、URLにこんな異物が入ってしまうと、アノテーション処理が失敗してしまう。
補足として、仮にhref="#"ではなくhref=""という空文字にした場合は、同じページをリロードする処理が走る。
やはり抜本的な解決にはならない。
テストだぜ href内にJavaScript処理を書いて、何も実行させないという方法がある。 結果は次の通り。
この方法は昔はスタンダードだったらしい。
しかし現在のブラウザではリンクをクリックする前のホバーした段階から、リンク先URLが表示されてしまうことがある。
そうすると「javascript:void(0);」という一般人には訳の分からないコードが表示されダサいので廃れたらしい。