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>
查看DEMO
