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 ～ 百式管理人のライフハックブログ