• RSS

[CSS]CSSの pointer-events で <a> タグのリンクを無効化する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

<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 を使ってリンクを無効にする方法も別途まとめましたので、こちらも合わせて参考にしてみてください。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す