摘要：<!DOCTYPE html> <html> <head> <!-- 参考网络示例 --> <meta charset="UTF-8">
<!DOCTYPE html>
<html>
<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="jquery-3.3.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>
<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>
批改老师：灭绝师太批改时间：2019-01-11 14:24:45
老师总结：效果完成的不错，必要的地方还是需要敲上注释哦！
