html - 单击此 div 时 css 隐藏附近的 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 */

但是，我希望在单击标题时发生这种情况。所以，我尝试了这个：

.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