リンクを無効にするスタイル

No links anchor element with CSS

記述したリンクを無効にしたいといった事がたまにあります。

例えば、

電話番号リンク等を作成した場合、PCではうまく動作しないので、メディアクエリ―を使って、一定のブラウザサイズ以上では、電話番号リンクが動作しないようにするとか

WordPressのプライマリーメニューなどで、親になる項目は、hoverした時に、サブメニューを表示したいけど親ページには飛ばしたくないといったケース等

少し工夫すると、CSSだけでお手軽にリンクを無効にすることが出来ます。

CSS

.no-links{
	pointer-events: none;
	cursor: default;
	text-decoration:none;
}

HTML

	<article> 
	<h2>No links</h2>
<a class="no-links" href="http://www.tenman.info/">no link</a>
<a href="http://www.tenman.info/">tenman.info</a>
	</article>

example

no link
tenman.info

browser support

ブラウザサポート

Can I Use pointer-events? Data on support for the pointer-events feature across the major browsers from caniuse.com.

relate link

特定のカテゴリーで、表示はそのまま、リンクだけを外したい

javascript

aタグの無効化 - preventDefaultとreturn falseの違い

[jQuery]イベントのバブリングって何？

CSS note