[CSS]CSSの pointer-events で <a> タグのリンクを無効化する方法
スポンサード
応用としては、CSSで
IEでの利用は厳しそうですので、Javascript を使ってリンクを無効にする方法も別途まとめましたので、こちらも合わせて参考にしてみてください。
スポンサード
<a>タグをクリックして何も起きないようにする、ということをしようと思います。
一番簡単な方法は、CSS3の pointer-events
を利用することですが、CSS3なのでIEでの動きは微妙。
スマフォサイトなら気にせずに使えるのかなという印象。
pointer-events:none でリンクを無効化する
<a>タグのリンクを無効にするには、CSSファイルで以下のように記述します。a.nav { pointer-events: none; }上記例だと、
<a class="nav" href="#">
のリンクをクリックしてもアクションが起きません。応用としては、CSSで
pointer-events:none
とリンクタグを無効化することにより、「:target疑似クラス」を利用したLightbox 的な動きをさせるなんてことに利用できそうな印象です。IEでの利用は厳しそうですので、Javascript を使ってリンクを無効にする方法も別途まとめましたので、こちらも合わせて参考にしてみてください。
スポンサード
コメント