jQueryなどのJavaScriptではクリックする度に交互にアクションを実行させる時に
「toggle(トグル)」という処理をよく使用します。
この「toggle」処理をJavaScriptを使用せずに、CSS3のみで実装させる方法が紹介されていたのが
興味深かったのでメモ書き程度に紹介してみます。

CSS3 toggle-button without JavaScript


CSS3 toggle-button without JavaScript
ソース構成等はこちらから

画面上の水滴の様な画像をクリックすると画面全体が切り替わり、
再度同じところの画像をクリックすると元に戻ります。

このCSSのみでの「toggle」動作は、CSS3プロパティの「:target」と「pointer-events」を組み合わせて実現しています。
基本部分は3行程度で実装可能となっているシンプルさもとてもいい感じです。

実際に試してみると以下の様な感じに。
※画像をクリックしてください。

CSS3 TOGGLE SAMPLE

切り替えるエリアを重ね合わせて
クリックごと(「:target」が切り替わるごと)に「opacity」で表示/非表示を切り替えます。

HTMLとCSS構成は以下の様な感じになっています。

◆HTML
<div id="toggle">
<a class="back" href="#"><img src="img/photo02.jpg"></a>
<a class="front" href="#toggle"><img src="img/photo01.jpg"></a>
</div><!--/#toggle-->
◆CSS
/* ToggleArea
-------------------------- */
#toggle {
	margin: 0 auto;
	width: 400px;
	height: 300px;
	text-align: left;
	position: relative;
}

#toggle a {
	width: 100%;
	height: 100%;
	position: absolute;
}

/* CSS3 Toggle
-------------------------- */
#toggle:target .front {
	opacity: 0;
	pointer-events: none;
}

とても簡単かつ、いろいろな応用にも使えそうなので
どこかでもっと試してみたいと思います。

【元ネタ】
JavaScriptなしで、CSS3だけで画像のトグル処理を実現する – IDEA*IDEA ~ 百式管理人のライフハックブログ

サンプルファイルをダウンロードしたい方はこちらから