<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标跟随菜单</title>
<style>
*{margin: 0;padding:0; }
ul{list-style: none;}
a{text-decoration: none;}
.nav{ 100%;height: 60px;background-color: #303030;}
.nav_wrap{ 1000px;margin: 100px auto;position: relative;}
.nav li{float: left;line-height: 60px;}
.nav li a{color: #fff;padding: 0 30px;display: block;}
.nav .active a{color: red;}
.nav li a:hover{color: red;}
.nav .line{height: 4px;background-color: red;position: absolute;top: 60px;left: 0;}
</style>
</head>
<body>
<div class="nav">
<div class="nav_wrap">
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">名言</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">故事</a></li>
<li><a href="#">名人名言</a></li>
</ul>
<div class="line"></div>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
$(".nav").find(".line").width($(".nav li").eq(0).width()); //设置线条的宽度
$(".nav li").hover(function(){
var _left=$(this).position().left; //鼠标移入时,获取li的left值
$(".nav").find(".line").width($(this).width()).stop().animate({"left":_left},200);
},function(){
var _left=$(".nav li.active").position().left; //鼠标移出时,获取li.active的left值
$(".nav").find(".line").width($(".nav li.active").width()).stop().animate({"left":_left},200);
})
$(".nav li").click(function(){
var _left=$(this).position().left;
$(this).addClass("active").siblings().removeClass("active");
$(".nav").find(".line").width($(this).width()).stop().animate({"left":_left},200);
})
})
</script>
</body>
</html>