CSS特效（五）：导航高亮的设置

最新推荐文章于 2024-08-05 15:37:52 发布

wait......

最新推荐文章于 2024-08-05 15:37:52 发布

阅读量2.3k

点赞数

分类专栏： CSS特效文章标签： css html html5

本文链接：https://blog.csdn.net/qwerty053/article/details/120631123

版权

CSS特效专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天满课的孩子，偷个懒，做个超级简单的导航高亮，效果如下：
在这里插入图片描述
这个特效让我学到了一个新知识，就是nth-child()，一个超棒的解释如下：
(38条消息) CSS3 :nth-child(n)使用注意_IT技术宅-北方的刀郎-CSDN博客

所以这个特效中最主要的就是理解nth-child()，然后为其设置hover之后某一元素的变化，即如下代码：li:nth-child(1):hover ~ #nav，学到了！

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            
            background-color: bisque;
        }

        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        ul {
            display: flex;
            position: relative;
        }

        ul li {
            list-style: none;
            width: 120px;
            /* font-size: 25px; */
            line-height: 40px;
            text-align: center;
        }

        a{
            text-decoration: none;
            color:rgb(71, 172, 255);
            font-size: 20px;
        }

        #nav{
            width: 110px;
            height: 40px;
            background-color: rgba(187, 219, 70, 0.329);
            position: absolute;
            border-radius: 6px;
            z-index:-1;
            left:5px;
            bottom:0;
            transition:all ease,0.4s
        }

        
        li:nth-child(2):hover ~ #nav{
            left:125px;
        }

        li:nth-child(3):hover ~ #nav{
            left:245px;
        }

        li:nth-child(4):hover ~ #nav{
            left:365px;
        }

        li:nth-child(5):hover ~ #nav{
            left:485px;
        }

    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品介绍</a></li>
            <li><a href="#">服务介绍</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
            <div id="nav"></div>
        </ul>
    </div>
</body>

</html>