<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ position: absolute; left: 100px; width: 500px; height: 100px; background-color: #A0522D; } li{ box-sizing: border-box; float: left; width: 50px; height: 100px; background-color: #0070C9; border: 1px white solid; list-style: none; position: relative; } .aa{ width: 300px; } .last{ position: absolute; right: 0; top: 0; } </style> </head> <body> <ul id="box"> <li class="aa">1</li> <li class="">2</li> <li class="">3</li> <li class="">4</li> <li class="last">5</li> </ul> <script src="../jQuery/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $('#box li').mouseover(function(){ //让指定li变宽 让其他li变窄 $(this).stop().animate({'width':'300px'},800).find().end().siblings().stop().animate({'width':'50px'},800) }) }) </script> </body></html>