css实现：
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>携程</title> 5 <style> 6 * {margin: 0;padding: 0;} 7 .xiecheng {width: 1200px;height: 260px;margin: 50px auto;} 8 .box {width: 200px;height: 260px;text-align: center;overflow: hidden;float: left;position: relative;} 9 .box > img {position: absolute;top: 0;left: -100px;} 10 .box > div {width: 200px;height: 260px;background: #222;opacity: .3;position: absolute;top: 0;left: 0;} 11 .box > p {width: 200px;height: 230px;text-align: center;position: absolute;z-index: 3;font-size: 30px;color: white;padding-top: 30px;} 12 .xiecheng:hover .box {width: 160px;} 13 .xiecheng:hover .box:hover {width: 400px;} 14 .xiecheng:hover .box p {width: 160px;} 15 .box:hover div {display: none;} 16 .box:hover img {left: 0;} 17 .box:hover p {display: none;} 18 19 </style> 20 </head> 21 <body> 22 <div class="xiecheng"> 23 <div class="box"> 24 <img src="img/img1.png"> 25 <div></div> 26 <p>园<br>林<br>酒<br>店</p> 27 </div> 28 <div class="box"> 29 <img src="img/img2.png"> 30 <div></div> 31 <p>情<br>侣<br>酒<br>店</p> 32 </div> 33 <div class="box"> 34 <img src="img/img3.png"> 35 <div></div> 36 <p>设<br>计<br>师<br>酒<br>店</p> 37 </div> 38 <div class="box"> 39 <img src="img/img4.png"> 40 <div></div> 41 <p>青<br>年<br>旅<br>社</p> 42 </div> 43 <div class="box"> 44 <img src="img/img5.png"> 45 <div></div> 46 <p>特<br>色<br>客<br>栈</p> 47 </div> 48 <div class="box"> 49 <img src="img/img6.png"> 50 <div></div> 51 <p>海<br>岛<br>酒<br>店</p> 52 </div> 53 </div> 54 </body> 55 </html>
js实现：
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>Document</title> 7 <style> 8 * {margin: 0; padding: 0;} 9 ul li { list-style: none;} 10 .cont { width: 100%; height: 260px; display: flex;justify-content: center; overflow: hidden;} 11 .cont ul{width:1300px; display: flex; justify-content: center; } 12 .cont ul li { width: 200px; height: 260px; float: left;position: relative;} 13 .cont ul li div { width: 100%; height: 260px;} 14 .cont ul li p {position: absolute; left: 0; top: 0;right:0; bottom:0; background: rgba(0,0,0,.3);} 15 .cont ul li p span{display:block; color: #FFF;font-size: 30px; padding: 30px;width: 30px; margin: 0 auto; } 16 .cont li:nth-child(1) .img{background: url(img/1.jpg) center;} 17 .cont li:nth-child(2) .img{background: url(img/2.jpg) center;} 18 .cont li:nth-child(3) .img{background: url(img/3.jpg) center;} 19 .cont li:nth-child(4) .img{background: url(img/4.jpg) center;} 20 .cont li:nth-child(5) .img{background: url(img/5.jpg) center;} 21 .cont li:nth-child(6) .img{background: url(img/6.jpg) center;} 22 23 </style> 24 </head> 25 <body> 26 <div class="cont"> 27 <ul> 28 <li> 29 <p><span>园林酒店</span></p> 30 <div class="img"></div> 31 </li> 32 <li> 33 <p><span>情侣酒店</span></p> 34 <div class="img"></div> 35 </li> 36 <li> 37 <p><span>设计师酒店</span></p> 38 <div class="img"></div> 39 </li> 40 <li> 41 <p><span>青年旅舍</span></p> 42 <div class="img"></div> 43 </li> 44 <li> 45 <p><span>特色酒店</span></p> 46 <div class="img"></div> 47 </li> 48 <li> 49 <p><span>海岛酒店</span></p> 50 <div class="img"></div> 51 </li> 52 </ul> 53 </div> 54 </body> 55 <script src="../jquery.js"></script> //jQuery框架 56 <script> 57 $(".cont").find("li").mouseover(function(){ 58 $(this).stop().animate({width:400}) 59 .children("p").stop().hide() 60 .parent().siblings().stop().animate({width:160}) 61 .children("p").stop().show(); 62 }) 63 64 $(".cont").find("li").mouseout(function(){ 65 $(".cont") 66 .find("li") 67 .stop() 68 .animate({width:200}) 69 .children("p") 70 .stop() 71 .show(); 72 }) 73 </script> 74 </html>
效果：
