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

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

CSS3の「:checked」疑似クラスをinputタグに使うことで、JavaScriptを使わずにクリックイベントを実装します。今回はクリックで画像をグレースケールにするサンプルコードを記述しています。

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

クリックイベントを実装

inputタグと結びついたlabel をクリックすることで、inputタグの直後に隣接するdivへのイベントを実行しています。

サンプルコード

以下はクリックした際に、下の画像をグレースケールにするサンプルコードを記述しています。

ブラウザ上で表示した結果

neko