<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>艺龙</title> ???<style type="text/css"> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????ul { ???????????list-style: none; ???????} ???????#box { ???????????margin: 50px auto; ???????????width: 1205px; ???????} ???????#box li { ???????????position: relative; ???????????float: left; ???????????width: 200px; ???????????height: 260px; ???????????cursor: pointer; ???????} ???????#box li .shadow { ???????????position: absolute; ???????????width: 100%; ???????????height: 100%; ???????????background: rgba(0, 0, 0, .2); ???????} ???????#box li .text { ???????????position: absolute; ???????????left: 0; ???????????right: 0; ???????????margin: 30px auto 0; ???????????width: 40px; ???????????font-size: 30px; ???????????color: #fff; ???????????text-align: center; ???????} ???</style></head><body> ???<ul id="box"> ???????<li style="background:url(images/1.jpg) center no-repeat;"> ???????????<div class="shadow"></div> ???????????<div class="text">园林酒店</div> ???????</li> ???????<li style="background:url(images/2.jpg) center no-repeat;"> ???????????<div class="shadow"></div> ???????????<div class="text">设计师酒店</div> ???????</li> ???????<li style="background:url(images/3.jpg) center no-repeat;"> ???????????<div class="shadow"></div> ???????????<div class="text">青年旅社</div> ???????</li> ???????<li style="background:url(images/4.jpg) center no-repeat;"> ???????????<div class="shadow"></div> ???????????<div class="text">特色客栈</div> ???????</li> ???????<li style="background:url(images/5.jpg) center no-repeat;"> ???????????<div class="shadow"></div> ???????????<div class="text">海岛酒店</div> ???????</li> ???????<li style="background:url(images/6.jpg) center no-repeat;"> ???????????<div class="shadow"></div> ???????????<div class="text">海外温泉</div> ???????</li> ???</ul> ???<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script> ???<script> ???????$(‘#box li‘).mouseover(function () { ???????????$(this).stop(true).animate({ ???????????????width:400 ???????????}).children().css(‘display‘, ‘none‘).end().siblings().stop(true).animate({width:160}).children().css(‘display‘, ‘block‘); ???????}); ????????$(‘#box‘).mouseout(function () { ???????????$(this).children().animate({width: 200}).children().css(‘display‘, ‘block‘); ???????}); ???</script></body></html>
图片更换即可
js艺龙
原文地址：https://www.cnblogs.com/bgwhite/p/9476315.html