transition标签_前端css基础篇（五）纯css tab标签选项卡

原理是利用绝对定位将导航栏对应的选项堆在一个层面上，鼠标划过哪个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>

默认是 鼠标移开时所在的tab选项上

鼠标移上第二个tab选项

鼠标移上第三个tab选项

鼠标移上第四个tab选项

作者：志若鸿鹄，尺步寸微

链接：前端css基础篇（五）纯css tab标签选项卡

来源：CSDN