1 <!doctype html> 2 <html> 3 <head> 4 <style type="text/css"> 5 body,ul,li,p {margin: 0;padding: 0} 6 ul,ol {list-style: none;} 7 .mydiv{height:128px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px solid #d3d3d3;border-color:rgba(0,0,0,.12);overflow:hidden;width:938px;margin-top:12px;background:#fff} 8 .mydiv ul{width:1000px} 9 .mydiv li{width:156px;height:128px;float:left;overflow:hidden;-webkit-transition:all .1s linear;-moz-transition:all .1s linear;-o-transition:all .1s linear;-ms-transition:all .1s linear;transition:all .1s linear} 10 .mydiv li *{-webkit-transition:all .1s linear;-moz-transition:all .1s linear;-o-transition:all .1s linear;-ms-transition:all .1s linear;transition:all .1s linear} 11 .mydiv li a{width:156px;height:128px;display:block;position:relative;cursor:pointer;text-decoration:none;overflow:hidden} 12 .mydiv li a:hover{position:absolute} 13 .mydiv li a:hover .mask{-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in} 14 .mydiv li img{height:72px;width:117px;position:absolute;bottom:0;right:-13px} 15 .mydiv li .line{height:128px;width:0;font-size:0;border-right:1px dashed #cacaca;position:absolute;right:0;top:4px} 16 .mydiv li .info{position:absolute;top:0;left:0;width:136px;padding:4px 10px} 17 .mydiv li .info h3{font-size:14px;font-weight:700} 18 .mydiv li .info p{color:#868686;font-size:12px;overflow:hidden;width:136px;height:22px;line-height:22px} 19 .mydiv li .info p.price{font-size:14px;font-style:italic;color:#fa2a5d;height:35px} 20 .mydiv li .info p.price strong{font-size:22px;font-family:Arial;padding-right:2px} 21 .mydiv li .info p.price i{font-size:14px} 22 .mydiv li .info p.more{display:none} 23 .mydiv .mask{height:128px;width:156px;display:block;position:absolute;top:0;left:0;background:#000;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in;_display:none!important} 24 25 .mydiv .big{width:314px} 26 .mydiv .big a{width:314px} 27 .mydiv .big img{width:195px;height:120px;right:0;bottom:0} 28 .mydiv .big .info{width:294px} 29 .mydiv .big .info h3{font-size:18px} 30 .mydiv .big .info p{font-size:14px;width:166px} 31 .mydiv .big .info p.price{font-size:16px;padding-top:7px} 32 .mydiv .big .info p.price strong{font-size:28px} 33 .mydiv .big .info p.price i{font-size:16px} 34 .mydiv .big .info p.more{display:block;font-size:12px;color:#ff2a5b} 35 .mydiv .big .mask{width:314px} 36 .mydiv:hover .mask{-ms-filter:"alpha(Opacity=15)";filter:alpha(opacity=15);opacity:.15;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in} 37 </style> 38 <script type="text/javascript" src="jquery-1.9.1.js"></script> 39 </head> 40 <body> 41 <div id="subject" class="mydiv"> 42 <ul> 43 <li> 44 <a> 45 <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg"> 46 <div class="info"> 47 <h3 style="color:#f62368">聚美妆</h3> 48 <p>聚美妆1/2周年庆</p> 49 <p class="price"><strong>1</strong><i>折起</i></p> 50 <p class="more">进入专题抢购 > </p> 51 </div> 52 <s class="line"></s> 53 <i class="mask"></i> 54 </a> 55 </li> 56 <li class="big"> 57 <a> 58 <img src="http://gtms01.alicdn.com/tps/i1/T1qxGLFsVbXXbA5QAK-195-120.jpg_Q90.jpg"> 59 <div class="info"> 60 <h3 style="color:#ff578a">Baby购</h3> 61 <p>宝宝该换装了，新品抢购</p> 62 <p class="price"><strong>2.5</strong><i>折起</i></p> 63 <p class="more">进入专题抢购 > </p> 64 </div> 65 <s class="line"></s> <i class="mask"></i> 66 </a> 67 </li> 68 <li> 69 <a> 70 <img src="http://gtms02.alicdn.com/tps/i2/T1KOSNFxXaXXbA5QAK-195-120.jpg_Q90.jpg"> 71 <div class="info"> 72 <h3 style="color:#6d3fa7">时装团</h3> 73 <p>时尚春装，清新小潮搭配</p> 74 <p class="price"><strong>1</strong><i>折起</i></p> 75 <p class="more">进入专题抢购 > </p> 76 </div> 77 <s class="line"></s> <i class="mask"></i> 78 </a> 79 </li> 80 <li> 81 <a> 82 <img src="http://gtms04.alicdn.com/tps/i4/T1CCeIFrVbXXbA5QAK-195-120.jpg_Q90.jpg"> 83 <div class="info"> 84 <h3 style="color:#d61939">TV购</h3> 85 <p>补血养颜 就这么简单</p> 86 <p class="price"><strong>2.6</strong><i>折起</i></p> 87 <p class="more">进入专题抢购 > </p> 88 </div> 89 <s class="line"></s><i class="mask"></i> 90 </a> 91 </li> 92 <li> 93 <a> 94 <img src="http://gtms01.alicdn.com/tps/i1/T1jmKJFyJbXXbA5QAK-195-120.jpg_Q90.jpg"> 95 <div class="info"> 96 <h3 style="color:#6f9400">聚新鲜</h3> 97 <p>最纯正的泰国香米</p> 98 <p class="price"><strong>5</strong><i>折起</i></p> 99 <p class="more">进入专题抢购 > </p> 100 </div> 101 <i class="mask"></i> 102 </a> 103 </li> 104 </ul> 105 </div> 106 <script type="text/javascript"> 107 window.onload=function() 108 109 { 110 var outer=document.getElementById('subject'); 111 112 var list=outer.getElementsByTagName('li'); 113 114 for(var i=0;i<list.length;i++) 115 116 { list[i].onmouseover=function(){ 117 118 for(var i=0;i<list.length;i++) 119 120 {list[i].className=''; } 121 122 this.className='big';}} 123 } 124 </script> 125 </body> 126 </html>
效果图：
