是否可以使用类似于打开/关闭或显示/隐藏的东西,而不是使用面板或手风琴菜单,而是使用图标块?
有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>
答案 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>