<!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>
图片更换即可
原文地址:https://www.cnblogs.com/bgwhite/p/9476315.html
时间: 2024-10-13 19:28:37