代码从别的博主上面扒下来的,附上链接 原创博客地址
原理是利用绝对定位将导航栏对应的选项堆在一个层面上,鼠标划过哪个tab标签,就改变哪个标签对应的选项的z-index,将他层级变高,放在最上层;
<style>
body{
font-size: 0;
}
.box{
text-align: center;
}
.box .tab{
display: inline-block;
width: 120px;
height: 44px;
padding: 7px;
border: 1px solid #ccc;
border-bottom: 0px;
box-sizing:border-box;
background: #fff;
font-size: 16px;
line-height: 26px;
color: #555;
transition: all 0.5s linear;/*过渡动画效果*/
}
.box .tab:hover{
background: #ccc;
transition: all 0.5s linear;
}
.con{
width: 800px;
height: 400px;
margin:0 auto;
}
.con .list{
width: 800px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
position: absolute;/*绝对定位让所有list堆一起*/
z-index: 1;
box-sizing:border-box;
}
.list img{
height: 300px;
width: auto;
margin: 40px auto;
}
/*根据划过哪个tab标签,对应的con中list*/
.box>.tab:nth-child(1):hover~.con>.list:nth-child(1),
.box>.tab:nth-child(2):hover~.con>.list:nth-child(2),
.box>.tab:nth-child(3):hover~.con>.list:nth-child(3),
.box>.tab:nth-child(4):hover~.con>.list:nth-child(4),
.list:hover/*鼠标划过改变层级关系让他在最上层*/{
z-index: 3;
}
</style>
<div class="box">
<a class="tab">表情图1</a>
<a class="tab">表情图2</a>
<a class="tab">表情图3</a>
<a class="tab">表情图4</a>
<div class="con">
<div class="list"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3892538129,1218215227&fm=26&gp=0.jpg"></div>
<div class="list"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1174234018,3482158685&fm=26&gp=0.jpg"></div>
<div class="list"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1789379040,3595596079&fm=26&gp=0.jpg"></div>
<div class="list"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=108803361,243136714&fm=26&gp=0.jpg"></div>
</div>
</div>