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

CSSプロパティ

2012.12.26

<a>タグをクリックして何も起きないようにするということをしようと思います。

一番簡単な方法は、CSS3のpointer-eventsを利用することですが、CSS3なのでIEでの動きは微妙です…。

スマフォサイトなら気にせずに使えるのかなという印象です。

pointer-events:noneでリンクを無効化する

<a>タグのリンクを無効にするには、CSSファイルで以下のように記述します。

a.nav	{
	pointer-events: none;
}

a.nav {

pointer-events: none;

}

上記例だと<a class=”nav” href=”#”>のリンクをクリックしてもアクションが起きません。

応用としては、CSSでpointer-events:noneとリンクタグを無効化することにより、「:target疑似クラス」を利用したLightbox的な動きをさせるなんてことに利用できそうな印象です。

IEでの利用は厳しそうですので、Javascript を使ってリンクを無効にする方法も別途まとめましたので、こちらも合わせて参考にしてみてください。