Fri, October 20, 2017

pointer-eventsを使って現在位置のリンクを無効にする方法

CSS3の「pointer-events」を使えば、JavaScriptを使わずに現在位置のリンクを無効にすることができます。

ナビゲーションなど、<a>タグやclassの有無に関係なく実装できるので、コードを全ページ共通で使うことができます。

サンプルでは<body>タグに付与したIDに紐付かせる方法で、ナビゲーションの現在位置のリンクを制御する方法を紹介しています。

対応ブラウザ:Firefox 3.6+, Safari 3+, Chrome (5+?)

■HTMLサンプル

bodyにIDを指定

<body id="about">

ナビゲーション部分

<nav>
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="clients"><a href="#">Clients</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
</ul>
</nav>
■CSSサンプル
#about nav .home > a {
	pointer-events: none;
	cursor: default;
}

デモページ

 

情報元:CSS-Tricks

この記事を共有 :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Leave a Reply

Spam Protection by WP-SpamFree