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

伪类“active”似乎可以完成这项工作

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

可以查看my jsfiddle