直接上代码
几个参数和函数:
CSS
absolute:
绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。可脱离文档流。要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。
relative:
相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级 内容区的原始点进行定位。
JQUERY
animate("style","speed"):该方法通过CSS样式将元素从一个状态改变为另一个状态。
find():找到某个方法。
下面demo演示了鼠标划过图片出现内容的例子。
主要思想为先把 .title 左移覆盖，然后通过鼠标 事件 animate() 方法出现在图片中。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .brands-list { 8 width: 480px; 9 height: 350px; 10 overflow: hidden; 11 margin: 20px auto 0 auto; 12 } 13 .brands-list li a { 14 position: relative; 15 height: 104px; 16 display: block; 17 cursor: pointer; } 18 .brands-list li a .title 19 { z-index: 2; 20 position: absolute; 21 bottom: 10px; 22 left: -160px; 23 width: 150px; 24 height: 20px; 25 padding: 0 0 0 10px; 26 color: #f1e8eb; 27 line-height: 17px; 28 font-size:12px;} 29 </style> 30 <script src="js/jquery.js"></script> 31 </head> 32 <body> 33 <div class="brands-list"> 34 <ul> 35 <li><a href="xx"><img src="pic_2.jpg" ><span class="title">TEST</span> 36 </a></li> 37 </ul> 38 </div> 39 </body> 40 <script> 41 $(function(){ 42 $(".brands-list li a").hover(function(){ 43 $(this).find(".title").animate({left:'0px'}); 44 },function(){ 45 $(this).find(".title").animate({left:'-160px'}); 46 }); 47 }); 48 </script> 49 </html>
方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。