🍉
クリックで表示を切り替えるクリックイベント風CSS
はじめに
今回はクリックしたら文字や画像を切り替える処理を作ります、HTMLとCSSのみで!
通常クリックイベントはJavaScriptを使いますが、今回はJavaScriptを使わない縛りです🎃
クリックで文字の表示を切り替える
DEMO
HTML
<input type="checkbox" id="toggle">
<label class="label" for="toggle"></label>
チェックボックスと、チェックボックスに関連付けたラベルを用意します。
チェックのON/OFFでイベントを制御するためです。
CSS
#toggle {
display: none;
}
#toggle + .label::after {
content: "クリック前(checkbox OFF)";
}
#toggle:checked + .label::after {
content: "クリック後(checkbox ON)";
}
チェックボックスの表示は不要なのでdisplay:none
とし、
疑似クラスchecked
を使って、クリック前とクリック後のCSSを切り替えます。
チェックボックスと関連付けたラベルは隣接セレクタ+
をclass名で指定し、
疑似クラスafter
とプロパティcontent
で文字を挿入しています。
ラベルをクリックするとチェックボックスのON/OFFが切り替わるので、
これだけで完成です♪
クリックで画像の表示を切り替える
DEMO
HTML
文字の表示を切り替える場合と同じで、
チェックボックスと、チェックボックスに関連付けたラベルを用意します。
CSS
#toggle {
display: none;
}
#toggle + .label::after {
content: url("{画像ファイルのパス}");
}
#toggle:checked + .label::after {
content: url("{画像ファイルのパス}");
}
文字の表示を切り替える場合とほぼ同じですが、挿入する画像ファイルをurl
で指定します。
urlの指定は、相対パスでも絶対パスでもOKです。
おわりに
JavaScriptの方がシンプルに実現できることを、わざわざCSSを使う必要はないですが、
CSSだけでもいろいろ動きのある表現ができますね。
もっと調べたら表現の幅を広がって面白そうです🧙
参考サイト
Discussion