标签：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>squeezebox</title> 6 <style> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 body{ 12 padding:100px; 13 } 14 li{ 15 list-style-type:none; 16 } 17 ul{ 18 width:600px; 19 height:250px; 20 overflow:hidden; 21 } 22 li{ 23 float:left; 24 width:120px; 25 -webkit-transition: width 0.5s ease-out; 26 -moz-transition: width 0.5s ease-out; 27 -ms-transition: width 0.5s ease-out; 28 -o-transition: width 0.5s ease-out; 29 transition: width 0.5s ease-out; 30 } 31 li:hover{ 32 width:400px; 33 } 34 ul:hover li:not(:hover){ 35 width:50px; 36 } 37 </style> 38 </head> 39 <body> 40 <ul> 41 <li><a href="#"><img src="images/1.jpg" alt=""/></a></li> 42 <li><a href="#"><img src="images/2.jpg" alt=""/></a></li> 43 <li><a href="#"><img src="images/3.jpg" alt=""/></a></li> 44 <li><a href="#"><img src="images/4.jpg" alt=""/></a></li> 45 <li><a href="#"><img src="images/5.jpg" alt=""/></a></li> 46 </ul> 47 </body> 48 </html>
核心思想是利用css3 not选择器完成
demo 链接：http://wangpengfei15975.github.io/squeezebox
标签：
原文地址：http://www.cnblogs.com/Scott-se7en/p/5228201.html
