纯css3实现hover选项卡效果

最新推荐文章于 2023-10-13 17:03:44 发布

one.dream

最新推荐文章于 2023-10-13 17:03:44 发布

阅读量1k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_44472722/article/details/92802294

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

原理：利用css hover可以控制同级或同级子级元素

<DOCTYPE html>
    <html>
    <head>
        <title>Tab选项卡</title>
        <meta charset="utf-8">
        <style type="text/css">
            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: #eee;
                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;/*堆一起*/
                z-index: 1;
                box-sizing:border-box;
            }
            .list img{
                height: 300px;
                width: auto;
                margin: 40px auto;
            }
            .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>
    </head>
    <body>
    <div class="box">
        <a class="tab">哇咔咔</a>
        <a class="tab">太棒了</a>
        <a class="tab">纳尼</a>
        <a class="tab">不要听</a>
        <div class="con">
            <div class="list"><img src="../img/1.png"></div>
            <div class="list"><img src="../img/2.png"></div>
            <div class="list"><img src="../img/3.png"></div>
            <div class="list"><img src="../img/4.png"></div>
        </div>
    </div>
    </body>
    </html>

one.dream

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css3实现hover选项卡效果

原理：利用css hover可以控制同级或同级子级元素<DOCTYPE html> <html> <head> <title>Tab选项卡</title> <meta charset="utf-8"> <style type="text/css">...
复制链接

扫一扫

专栏目录