使用CSS单击图标显示/隐藏内容(无javascript)

时间:2018-02-26 23:48:59

标签: html css toggle

是否可以使用类似于打开/关闭或显示/隐藏的东西,而不是使用面板或手风琴菜单,而是使用图标块?

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

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

使用网格

将图标排成一行
ERL_LINK

低于第四季'div'应显示内容。

修改:最终代码 我用float替换了position:absolute来显示图标下面的所有文本。

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

1 个答案:

答案 0 :(得分:0)

我建议使用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>