单击此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; }

您可以查看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