标签：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 ul{ 8 list-style: none; 9 } 10 .tab{ 11 width: 100px; 12 height: 200px; 13 float: left; 14 background: deepskyblue; 15 border-right: 1px solid gold; 16 transition: .7s ease 0s; 17 } 18 .tab.active{ 19 width: 400px; 20 background: lightblue; 21 transition: .7s ease 0s; 22 } 23 </style> 24 </head> 25 <body> 26 <ul id="slideMenu"> 27 <li class="tab active">1</li> 28 <li class="tab">2</li> 29 <li class="tab">3</li> 30 <li class="tab">4</li> 31 <li class="tab">5</li> 32 </ul> 33 <script src="jquery－1.11.2.js"></script> 34 <script> 35 $("#slideMenu").find(".tab").mouseover(function(){ 36 $("#slideMenu").find(".tab").removeClass("active"); 37 $(this).addClass("active"); 38 }); 39 </script> 40 41 </body> 42 </html>
标签：
原文地址：http://www.cnblogs.com/anywing/p/4644238.html
