css用于在单击此div时隐藏附近的div (适用于悬停)

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 */

但是，我希望在单击header时发生这种情况。所以，我试了一下：

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

Answer 1

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

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

你可以查看my jsfiddle

Answer 2

你可以在你的第一个div中使用tabindex，然后它就可以有焦点事件了。

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

然后在css中测试focus伪类

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

Check this jsfiddle