【お勉強メモ】CSSだけでクリックイベントをつくる

こんにちは、mickです。

LightboxをCSSで実装する方法を探したとき、CSSのおもしろい使い方も一緒に置いてありました。

なるほど、すごっ！

と思ったので、お勉強メモとして記事にしました。

⇒ ソース：UNICO LABO「クリックイベントをCSSだけで」

CSSの擬似的クリックイベント
まとめ。

CSSの擬似的クリックイベント

label要素がもつfor属性を使うと離れたinput要素を操作できます。
これを利用して、クリックイベントを擬似的につくりだせます。
CSSおもしろい。

CSSクリックイベントのデモ

ココをクリックすると下の文字と背景が反転します

吾輩は猫である。名前はまだない。

HTMLコーディング

<div id="sample">
  <label for="toggle">ココをクリックすると下の文字と背景が反転します</label>
  <input type="checkbox" id="toggle">
  <div>
    <p>吾輩は猫である。名前はまだない。</p>
  </div>
</div>

CSSコーディング

#sample label{
 cursor: pointer; /* ユーザーがマウスクリックできること知れるようにする */
}
#sample input{
 display: none;   /* Input要素によるボタンを非表示にする */
}
/* input要素のすぐ下にあるdiv要素を操作する */
#sample input+div{
 color: white;
 background: black;
}
/* チェックされた状態のinput要素のすぐ下にあるdiv要素を操作する */
#sample input:checked+div{
 color: black;
 background: white;
}

ポイントは、input:checked。
これで、input のときとの違いができるので、2つの状態を生み出せます。