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

 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 }
原文地址:https://www.cnblogs.com/jymz/p/3997934.html