<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } .clearfix{ zoom: 1; } .clearfix:after{ content:"."; display:block; width:0; height:0; visibility: hidden; overflow:hidden; } ul,li{ list-style:none; } img{ border:none; vertical-align:middle; } a{ text-decoration: none; color:#333; } .list li{ float:left; width:162px; height:162px; position: relative; overflow:hidden; border:1px solid #ccc; margin-right:10px; } .list-t,.list-b{ width:100%; height:100%; } .list-t{ z-index:9; } .list-t img{ width:100%; height:100%; } .list-b{ z-index:999; position:absolute; top:162px; left:0; background:#a3d39c; } </style> </head> <body> <ul class="list clearfix"> <li> <a href="javascript:void(0);"> <div class="list-t"> <img src="service-wd.png" alt=""/> </div> <div class="list-b"> 123456 </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="list-t"> <img src="service-wd.png" alt=""/> </div> <div class="list-b"> 123456 </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="list-t"> <img src="service-wd.png" alt=""/> </div> <div class="list-b"> 123456 </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="list-t"> <img src="service-wd.png" alt=""/> </div> <div class="list-b"> 123456 </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="list-t"> <img src="service-wd.png" alt=""/> </div> <div class="list-b"> 123456 </div> </a> </li> </ul> </body> <script src="../jquery-1.11.3.min.js"></script> <script> var timer; $(".list li").hover(function(){ clearTimeout(timer); var $this=$(this); timer=window.setTimeout(function(){ $this.find(".list-b").animate({"top":0}); },300) },function(){ clearTimeout(timer); $(this).find(".list-b").animate({"top":"162px"}); }) </script> </html>
鼠标经过li时，出现文字介绍