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

标签 html css

我的代码:

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

最佳答案

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

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

可以查看my jsfiddle

关于html - 单击此 div 时隐藏附近 div 的 css(用于悬停),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15412102/

相关文章:

css - DRY up CSS - 一个 child 的多个 parent

jquery - 需要通过 CSS 或 jQuery 解决问题

javascript - 使用向下/向上滑动过渡动画 v-if (Vue.js 2)

html - 切换器和下拉菜单不起作用

jquery - 使用jquery删除类后如何使css不忽略转换函数

html - 无法使标题居中

javascript - 如何使用服务器端创建的JQuery向元素添加点击事件

javascript - 如何使用 Javascript 将数组中的数据设置为表单元素的值

html - 如何禁用 HTML 元素中的换行?

css - 如何在文本字段中显示多种字体颜色