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