本文介绍如何使用jQuery制作当鼠标移入导航的时候，导航底部横线跟追鼠标移动。
制作步骤：首先定义数组预制底部横线距离左侧距离，定义鼠标移入事件，当鼠标移入，获得焦点字体变色。设置底部横线距离左侧距离，当鼠标移出，失去焦点字体颜色恢复。底部横线距离左侧距离恢复到初始位置。
关键js代码与说明
<script>
//顶部导航
//定义数组预制底部横线距离左侧距离
var navarr = ['20px', '130px', '240px', '350px', '460px']
//鼠标移入事件
$('.headr-nav li').mouseover(function () {
//获得焦点字体变色
$('.headr-nav li a').eq($(this).index('li')).css('color', '#4AB344')
//设置底部横线距离左侧距离
$('.spbottom:eq(0)').css('left', navarr[$(this).index()])
})
//鼠标移入事件
.mouseout(function () {
//失去焦点字体颜色恢复
$('.headr-nav li a').eq($(this).index('li')).css('color', '')
//底部横线距离左侧距离恢复
$('.spbottom:eq(0)').css('left', '20px')
})
</script>
