CSSだけでクリックイベントを発生させる方法

HTML/CSSでクリックやホバーイベントで自分自身のスタイルを変える事例はわんさかありますが、他の要素（例えばaリンク）をクリックして別の要素（例えばdiv）のスタイルをCSSだけで変える事例をあまり見かけません。一般的にはJavascriptを使うケースが多いのですがCSSのみでも実現できます。今回以下のような動きをするHTML/CSSの事例を書き留めておきます。

まずはHTMLから。クリックイベントを発生させるためには、input要素のchangedプロパティを利用しますが、aリンクと連動ができません。aリンクの代わりにlabel要素を使ってfor属性でinput要素と連動させます。“`for=”link-btn”“` で “`id=”link-btn”“` と連動させることができます。

<label id="label1" for="link-btn">クリック</label>
<input type="checkbox" id="link-btn">
<div id="label1-div">
<p>DIV要素</p>
</div>
 

 

次にCSSですが、input要素（）のcheckedプロパティでスタイルを変更することができます。

#label1{
    cursor: pointer;
}
#label1:hover{
    color: blue;
}
#link-btn{
    display: none;
}
#link-btn+#label1-div{
    background: lightgray;
}
#link-btn:checked+#label1-div{
    background: lightgreen;
}
#label1-div{
    width: 300px;
    height: 300px;
    background: gray;
}
 

 

 

 - HTML/JavaScript