下划线

最新推荐文章于 2024-10-25 14:07:17 发布

sinat_24496253

最新推荐文章于 2024-10-25 14:07:17 发布

阅读量451

点赞数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
</head>
<style>
*{margin: 0;padding: 0;}
.nav-box{
position: relative;
}
ul{
overflow: hidden;
list-style: none;
height: 40px;
line-height: 40px;
background-color: #000;
}
ul li{
float: left;
padding: 0 15px;
}
ul li a{
display: block;
font-size: 18px;
color: #fff;
text-decoration: none;
}
ul li a:hover{
color: #ff00ff;
}
.line{
position: absolute;
bottom:0;
left: 0;
display: block;
height: 3px;
width: 0px;
background-color: red;
}
</style>
<body>
<div class="nav-box">
<ul class="nav">
<li><a href="">1</a></li>
<li><a href="">22</a></li>
<li><a href="">333</a></li>
<li><a href="">4444</a></li>
<li><a href="">55555</a></li>
<li><a href="">666666666666</a></li>
<li><a href="">7777777777777777</a></li>
</ul>
<span class="line"></span>
</div>
<script src='http://code.jquery.com/jquery-1.8.0.min.js'></script>
<script>
$(function(){
$(".nav-box .nav li").hover(function(){
var _w=$(this).innerWidth();
var off=$(this).offset();
var _left=off.left;
$(".nav-box .line").stop(true).animate({left:_left,width:_w},300)
},function(){
$(".nav-box .line").animate({left:"0",width:"0"},600)
})
})
</script>
</body>
</html>