jquery做导航条动画

最新推荐文章于 2022-01-04 20:14:14 发布

piterpig

最新推荐文章于 2022-01-04 20:14:14 发布

阅读量310

点赞数 1

文章标签： jq

本文链接：https://blog.csdn.net/weixin_41963300/article/details/82469932

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq做导航动画</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            z-index: 0;
        }
        .box{
            margin: 0 auto;
            width: 1000px;
            height: 30px;
            background-color: black;
            position: relative;
        }
        ul{
            width: 800px;
            height: 30px;
            display: flex;
            position: absolute;
            background-color: pink;
            margin: 0 auto;
            left: 100px;
            flex-direction: row;
        }
        li{

            flex: 1;
            background-color: white;
            display: block;
            margin-right: 2px;

        }
        a{
            display: block;
            text-align: center;
            height: 10px;
            line-height: 30px;
            z-index:1;

        }
        span{
            display: block;
            height: 10px;
            background-color: white;
            z-index: -1;
            visibility: hidden;
            
        }
    </style>
</head>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        $('.box>ul>li').mouseenter(function () {
            $(this).css('backgroundColor','pink').find('span').eq(0).css('visibility','visible').stop().slideDown().siblings().slideUp();
        }).mouseleave(function () {   $(this).css('backgroundColor','white').find('span').eq(0).css('visibility','hidden').stop().slideUp().siblings().slideDown();
        })
    })
</script>
<body>
    <div class="box">
        <ul>
            <li>
                <a href="">1</a>
                <span></span>
            </li>
            <li>
                <span></span>
                <a href="">2</a>
                <span></span>
            </li>
            <li>
                <span></span>
                <a href="">3</a>
                <span></span>
            </li>
            <li>
                <span></span>
                <a href="">4</a>
                <span></span>
            </li>
            <li>
                <span></span>
                <a href="">5</a>
                <span></span>
            </li>
            <li>
                <span></span>
                <a href="">6</a>
                <span></span>
            </li>
            <li>
                <span></span>
                <a href="">7</a>
                <span></span>
            </li>

        </ul>
    </div>
</body>
</html>

piterpig

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery做导航条动画

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jq做导航动画&lt;/title&gt; &lt;style&gt; *{ padding:
复制链接

扫一扫