图片带标题显示

  1 <script src="http://www.phpjx.com:88/js/jquery.min.js"></script>
  2 <style>
  3 li{
  4 list-style:none;
  5 }
  6 div{
  7 display:block;
  8 height:100px;
  9 width:200px;
 10 float:left;
 11 margin-left:10px;
 12 }
 13 img{
 14 width:200px;
 15 height:100px;
 16 position:relative;
 17 z-index:100;
 18 }
 19 .title{
 20 position:absolute;
 21 width:200px;
 22 height:30px;
 23        background-color:#cccccc;
 24        z-index:1000;
 25 display:none;
 26 opacity:0.8;
 27 top:80px;
 28 }
 29 </style>
 30 <script>
 31 $(document).ready(function(){
 32                 $("img").each(function(i){
 33                         left=$("img").eq(i).offset().left-10;
 34                         $(".title").eq(i).css("left",left);
 35                         })
 36                 $("li").hover(function(){
 37                         $(".title",this).css("display","block");
 38                         },function(){
 39                         $(".title",this).css("display","none");
 40                         })
 41                 });
 42 </script>
 43 <meta http-equiv="content-type" content="text/html;charset=utf-8">
 44 <li>
 45 <div>
 46 <img src=1.png>
 47 </div>
 48 <div class="title">风景好好，我喜欢嘿嘿1</div>
 49 </li>
 50
 51 <li>
 52 <div>
 53 <img src=2.png>
 54 </div>
 55 <div class="title">风景好好，我喜欢嘿嘿2</div>
 56 </li>
 57
 58 <li>
 59 <div>
 60 <img src=3.png>
 61 </div>
 62 <div class="title">风景好好，我喜欢嘿嘿3</div>
 63 </li>                                                                                                                                                                                                                                                                                                                                                                                                                     
~                                                                                                                                                                                                                                                                                                                                                                                                                                                     
~                                                                                                                                                                                                                                                                                                                                                                                                                                                     
~