以前の記事で、aタグを無効化する方法を紹介しました。
JavaScript・jQueryを用いてaタグを無効化する方法について紹介しています。
2018-03-31 00:00
JavaScriptなどを使用してaタグを使用するのは、そこをクリックできるというのをユーザーに認識させるということがあるかと思います。
エンジニアの方は、この様な用途でaタグを使用してしまいますが、他にもCSSを使用して、特定の場所にマウスカーソルが当たった時に、マウスのカーソルを指マークにして、その部分をクリックできるとユーザーに認識させるという方法があります。
今回の記事では、このCSSを使用してマウスカーソルを指マークにする方法を紹介します。
その方法は、cursor:pointer;というものを設定する方法です。
例えば、htmlもボタンを使用する場合、通常のボタンでは、マウスカーソルは指マークに変わりませんが、このcursor:pointer;を使用することで、ボタンにマウスカーソルが当たった時に、指マークにすることが出来ます。
・指マークにならない例
ここにマウスが当たっても指マークにならない
・cursor:pointer;をstyleに設定し、マウスカーソルをボタンに合わせた時に指マークになる例
ここにマウスが当たると指マークになる
※cursor: hand;も同時に設定するとIE６にも対応できる様になるそうです。
htmlとcssを分ける場合は、下記の例の様にやるとpタグにマウスが当たった時にマウスカーソルを指マークにすることが出来ます。
CSSに詳しい人であれば、デザインを整えて、aタグを無効化にするのと同じ効果を狙って使用すると良いと思います。