CSSだけで、クリックイベントを実装する

クリックイベントといえば、javascriptが相場ですが、CSSだけで、擬似的にクリックイベントを作る事が出来ます。

例えば、以下の例

<style>
input[type="radio"]{
	visibility:hidden;
}
input[type="radio"]:checked+label{ font-weight: bold; } 
</style>

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="[/php]
</div>rad"/><label for="rad2">Radio 1</label>

example

Radio 1
Radio 1

input要素を使って、クリックされているかのように見せるシンプルな例です。

このような、CSSだけを使ってクリックするアクションが、実用性を、検討してみたいということもあって、WordPress　Enough 0.6というテーマに、CSSだけのクリックアクションを実装してみました

動作確認用のサンプル

• Enough Post Format Status(実際の動作を確認できます)

テーマの、html

<p tabindex="-1" class="post-status-title">Enough 0.6 live today ! Support PostFormat Status</p>
<div class="entry-content" tabindex="-1">
	<p>
		<a href="">	2013年5月1日12:40 AM</a>
	</p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	<div>
		<div class="post-format-entry-meta" style="position:relative;">
			<span class="meta-sep">by</span>
			<span class="author vcard">
					<a class="url fn n" href="" title="tenman の全投稿">
					tenman
				</a>
			</span>
				<a href="" class="permalink-post-format-status" rel="bookmark">
				<span>link to ステータス</span>
			</a>
		</div>
	</div>
</div>

テーマの　CSS

.format-status .post-status-title:focus,
.format-status .entry-content:focus{
	outline:none;
}
.format-status .entry-content{
	display:none;
}
.format-status .post-status-title:focus{
	outline:none;
}
.format-status .post-status-title:focus ~.entry-content{
	display:block;
}
.format-status .post-status-title:hover{
	cursor:pointer;
	}
.format-status .entry-content:focus{
	display:block;
	outline:none;
}
.term-post-format-status .format-status{
	background:#fff;
}

といった形で、実現しています。

皆さんは、このようなCSSだけの、クリックアクションをどう思いますか？

関連

CSS イベント