首页 > 代码库 > 切换,背景、字体、图片变化

切换,背景、字体、图片变化

 1 <div class="cen2_con2"> 2         <div class="cen2_con2_0" data="1"> 3             <div class="icons icon01"></div> 4             <div class="con2_con2_text">挑选爱车,<br> 一分钟获得审批</div> 5             <div class="icons icon011"></div> 6         </div> 7         <div class="cen2_con2_0" data="2"> 8             <div class="icons icon02" ></div> 9             <div class="con2_con2_text">等待电话回访,<br>接受线下上门服务</div>10             <div class="icons icon021"></div>11         </div>12         <div class="cen2_con2_0" data="3">13             <div class="icons icon03"></div>14             <div class="con2_con2_text">线下到店提车</div>15             <div class="icons icon031"></div>16         </div>17     </div>
 1 .icon01{background-position: 0px -160px;width:60px;height: 74px;margin-left: 60px;margin-top: 35px;margin-bottom: 25px;} 2 .icon02{background-position: -86px -160px;width:74px;height: 74px;margin-left: 60px;margin-top: 35px;margin-bottom: 25px;} 3 .icon03{background-position: -171px -160px;width:74px;height: 74px;margin-left: 60px;margin-top: 35px;margin-bottom: 25px;} 4 .cen2_con2_0{width: 319px;height: 355px;float:left;border-right: 1px solid #ffffff;} 5 .green{background-color: #99cc33;} 6 .cen2_con2_0.green .icon01{background-position: 0px -80px;} 7 .cen2_con2_0.green .icon02{background-position: -86px -80px;} 8 .cen2_con2_0.green .icon03{background-position: -171px -80px;} 9 .cen2_con2_0.green .con2_con2_text{color: #fff;10 }js{11 var change_c2 = function(){12   $(‘.cen2_con2_0‘).on({13     ‘mouseover‘:function(){14       $(this).addClass(‘green‘).siblings().removeClass(‘green‘);15     }16   });17   $(‘.cen2_con2_0‘).on({18     ‘mouseout‘:function(){19       $(this).removeClass(‘green‘);20     }21   });22 }

 

切换,背景、字体、图片变化