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

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

CSS(CSS3)のみでToggle(トグル)動作を実現させる方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR