html - このdivがクリックされたときに近くのdivを非表示にするcss（ホバーで機能）

Question

私のコード:

<div>
<div class='top-class'>
Header Name
</div>
<div class='body-class'>
This is body a
</div>
</div>


<div>
<div class='top-class'>
Another Header Name
</div>
<div class='body-class'>
Another body
</div>
</div>

私が試したcssコード：

.top-class:hover + .body-class { display: block; } /* This is working */

しかし、ヘッダーがクリックされたときにそれが起こりたいです。だから、私はこれを試しました：

.top-class:visited + .body-class { display: block; } /* DIDNT work */

Answer 1

擬似クラス「アクティブ」が機能しているようです

.top-class:active + .body-class { display: block; background-color: red; }

私のjsfiddleを確認できます

Answer 2

tabindex最初の div で使用すると、フォーカス イベントをオンにできます。

<div class='top-class' tabindex=1>Header Name</div>

次にcssでfocus疑似クラスをテストします

.top-class:focus + .body-class { display: block; background-color: red; } 

このjsfiddleを確認してください