pointer-events - CSS note

タグ別アーカイブ: pointer-events
リンクを無効にするスタイル
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]イベントのバブリングって何？
投稿日: 2012 年 6 月 tenman
投稿グループテキストタグ pointer-events

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

No links anchor element with CSS

CSS

HTML

example

browser support

relate link

javascript