css
<style type="text/css"> * { margin: 0; padding: 0; list-style: none; } li { float: left; padding: 0 5px; height: 30px; border: 1px solid; text-align: center; line-height: 30px; } ul{ position: relative; z-index: 2; } div{ position: absolute; background: red; height: 32px; width: 20px; z-index: 0; } nav{ position: relative; z-index: 2; } #red{ background: red; } </style>html
<body> <nav> <ul> <li id="red"> <a>首页</a> </li> <li> <a>啦啦啦</a> </li> <li> <a>啦啦啦啦</a> </li> <li> <a>首页</a> </li> <li> <a>首页</a> </li> <li> <a>啦啦啦</a> </li> <li> <a>首页</a> </li> <li> <a>首页</a> </li> </ul> <div></div> </nav> </body> <script> var blkleft=$("div").position().left; var blkwidth=$("div").innerWidth(); $(function() { $("li").mouseenter(function(){ var lileft=$(this).position().left; var liwidth=$(this).innerWidth(); $("div").stop().animate({left:lileft,width:liwidth}); }) .mouseleave(function(){ $("div").stop().animate({left:blkleft,width:blkwidth}) }) }) </script>