Show/Hide 使用 CSS 单击图标的内容（否 javascript）

Question

是否可以使用类似于切换 on/off 或 show/hide 的东西，而不是使用面板或手风琴菜单，而是使用图标块？

有4个图标排成一行，点击每个图标应该会显示图标行下方的内容，但在任何给定时间只能显示一个内容。

我只在寻找 CSS/HTML 解决方案 - 没有 javascript。

图标排成一行，使用网格

<!--display icons in a row, 4 columns-->
<div class="quarter">   
    <span class="icon1"></span>
</div>

下面第4个'quarter'div是应该显示内容的地方

编辑：最终代码 我将 position: absolute 替换为 float 以显示图标下方的所有文本。

.iconBlock{
    display: inline-block;  
    margin: 20px;
    padding: 0px 40px 15px 40px;
    cursor: pointer;
    outline: none !important;
    }

.iconBlock a{
    font-size: 40px;
    color: #000;
    }

.contentBlock {
    display: none;
    height: auto !important;
    opacity: 0;
    }

.iconBlock:hover a{
     color: #444;
    }

.iconBlock:focus a{
    color: #ff4455;
    }

.iconBlock:focus + .contentBlock{
    opacity: 1;
    display: block;
    float: left;
    top: 0;
    left: 0;
    }

Answer 1

我建议使用 javascript。但是这里是没有 js 的方法：

.icon{
  display: inline-block;
  margin: 20px;
  cursor: pointer;
  outline: none;
}

.icon i{
  font-size: 40px;
  color: #000;
}

.content{
  position: absolute;
  opacity: 0;
}

.icon:hover i{
  color: #444;
}

.icon:focus i{
  color: #ff4455;
}

.icon:focus + .content{
  opacity: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="quarter">   
    <a href="#" class="icon"><i class="fa fa-cog"></i></a>
    <div class="content">Content for icon 1</div>
    
    <a href="#" class="icon"><i class="fa fa-trash"></i></a>
    <div class="content">Content for icon 2</div>
    
    <a href="#" class="icon"><i class="fa fa-pencil"></i></a>
    <div class="content">Content for icon 3</div>
    
    <a href="#" class="icon"><i class="fa fa-user"></i></a>
    <div class="content">Content for icon 4</div>
</div>

Show/Hide 使用 CSS 单击图标的内容（否 javascript）

Show/Hide contents by clicking an icon using CSS (no javascript)

html

css

toggle