svip

html

1. <ul class="ranking1 nhovers">
   
2.   <li class="active">
   
3.     <i class="num num_1">1</i>
   
4.     <a href="/" class="imgBox" target="_blank"><img
   
5.         src="pic.png" alt=""></a>
   
6.     <h4><a href="/" target="_blank">标题标题标题标题标题</a></h4>
   
7.     <p><a href="/" target="_blank">下载</a></p>
   
8.   </li>
   
9.   <li class="">
   
10.     <i class="num num_1">2</i>
    
11.     <a href="/" class="imgBox" target="_blank"><img
    
12.         src="pic.png" alt=""></a>
    
13.     <h4><a href="/" target="_blank">标题标题标题标题</a></h4>
    
14.     <p><a href="/" target="_blank">下载</a></p>
    
15.   </li>
    
16.   
    
17. </ul>

复制代码

css

1. .ranking1 li .num{ font-style: normal; display: block; width: 20px; height: 20px; position: absolute; left: 0; top: 50%; margin-top: -10px; background-color: #cccccc; text-align: center; color: #fff;}
   
2. .ranking1 li .num_1{ background-color: #e88000; }
   
3. 
   
4. .ranking1 li{ position: relative; height: 20px; line-height: 20px; overflow: hidden; padding-left: 32px; border-bottom:1px dashed #f0f0f0;padding-top: 14px;padding-bottom: 14px;}
   
5. .ranking1 li h4{ font-weight: normal; height: 20px; overflow: hidden;line-height: 20px; white-space: nowrap;text-overflow: ellipsis;font-size: 15px;}
   
6. .ranking1 li .imgBox, .ranking1 li p{ display: none; }
   
7. .ranking1 .active,.pageright .ranking1 .active{ height: 72px; overflow: hidden; }
   
8. .ranking1 .active .imgBox,.pageright .ranking1 .active .imgBox{ display: block; width: 72px; height: 72px; float: left; margin-right: 16px;}
   
9. .ranking1 .active .imgBox img{ display: block; width: 100%; height: 100%; border-radius: 10px;}
   
10. .ranking1 .active h4{ height: 40px; line-height:20px; overflow: hidden; font-weight: normal;font-size: 16px;}
    
11. .ranking1 .active p{ display: block;height: 30px;}
    
12. .ranking1 .active .num{  }
    
13. .ranking1 li .fr{color: #e08d27;font-size: 14px;padding-left: 4px;}
    
14. .ranking1 .active .fr{display: none;}
    
15. .ranking1 .active p a{ display: inline-block; width: 60px; height: 30px;line-height: 30px;text-align: center;background: #f27426;color: #fff; border-radius: 3px;}

复制代码

js

1. $('.nhovers li').each(function(){
   
2.   $(this).mouseover(function(event) {
   
3.     $(this).addClass('active').siblings().removeClass('active');
   
4.   });
   
5. });
   

复制代码