jQuery鼠标悬停导航底部动画效果

最新推荐文章于 2022-09-21 19:08:34 发布

云处安

最新推荐文章于 2022-09-21 19:08:34 发布

阅读量186

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_36575358/article/details/103182375

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery鼠标悬停导航底部动画效果</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        img{
            border:0;
        }

        .header{
            width:100%;
            background:#F5F5F5;
        }
        .nav{
            width:1000px;
            margin:0 auto;
            overflow:hidden;
        }
        .nav ul li{
            height:40px;
            line-height:40px;
            float:left;
            padding:10px 5px;
            margin:0px 5px;
            position:relative;
        }
        .nav ul li a{
            color:#666;
            font-family:'Microsoft Yahei';
            font-size:14px;
            text-decoration:none;
        }
        .nav ul li a:hover{
            color:#000;
            text-decoration:none;
        }
        .nav ul li span{
            display:block;
            position:absolute;
            width:0px;
            height:0px;
            background:#1FAEFF;
            top:58px;
            left:50%;
        }
    </style>
</head>
<body>
<!-- 代码begin -->
<div class="header">
    <div class="nav">
        <ul>
            <li><a href=''>亚索</a><span></span></li>
            <li><a href=''>卡萨丁</a><span></span></li>
            <li><a href=''>火男</a><span></span></li>
            <li><a href=''>盖伦</a><span></span></li>
            <li><a href=''>阿卡丽</a><span></span></li>
            <li><a href=''>猫咪</a><span></span></li>
            <li><a href=''>卡莎</a><span></span></li>
            <li><a href=''>女警</a><span></span></li>
            <li><a href=''>男刀</a><span></span></li>
            <li><a href=''>布隆</a><span></span></li>
            <li><a href=''>日女</a><span></span></li>
            <li><a href=''>刀妹</a><span></span></li>
            <li><a href=''>铁男</a><span></span></li>
            <li><a href=''>潘森</a><span></span></li>
            <li><a href=''>卡特</a><span></span></li>
            <li><a href=''>婕拉</a><span></span></li>
        </ul>
    </div>
</div>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script>
    $(function(){
        $('.nav li').hover(function(){
            $('span',this).stop().css('height','2px');
            $('span',this).animate({
                left:'0',
                width:'100%',
                right:'0'
            },200);
        },function(){
            $('span',this).stop().animate({
                left:'50%',
                width:'0'
            },200);
        });
    });
</script>
<!-- 代码end -->
</body>
</html>