下划线跟随导航功能的实现
一、实现功能
当鼠标在导航条上移动时，下划线跟着移动，背景色和字体颜色改变，鼠标移出导航条时，下划线回到原位。
二、功能代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下滑线跟随导航功能</title>
<script src="../jquery-3.3.1.js"></script>
<style>
*{margin: 0;padding: 0;}
ul{
width: 1000px;
height: 40px;
line-height: 40px;
background: #f5f5f5;
margin: 0 auto;
}
ul li{
float: left;
list-style: none;
width:100px;
text-align: center;
}
ul li a{
text-decoration: none;
color: #333333;
}
ul li a:hover{
color: #fff;
}
</style>
</head>
<body>
<ul style="position:relative">
<li name="0"><a href="">要闻</a></li>
<li name="1"><a href="">国际</a></li>
<li name="2"><a href="">国内</a></li>
<li name="3"><a href="">社会</a></li>
<li name="4"><a href="">军事</a></li>
<li name="5"><a href="">娱乐</a></li>
<li name="6"><a href="">体育</a></li>
<li name="7"><a href="">汽车</a></li>
<li name="8"><a href="">科技</a></li>
<li name="9"><a href="">其他</a></li>
<div class="ba"style="position: absolute;width:100px;height: 2px;background:#ff6500;bottom: 0;;"></div>
</ul>
<script>
$(function(){
$('ul li').hover(function(){
var x = parseInt($(this).attr('name'))*100+'px'
$('.ba').stop().animate({left:x},300)
$(this).css('background','pink')
},function(){
$('.ba').stop().animate({left:''},300)
$(this).css('background','#f5f5f5')
})
})
</script>
</body>
</html>