.f44{font-size:44px;}
.how_buy{width:1210px;margin:auto;font-family:'Microsoft Yahei';height:247px;overflow:hidden;}
.how_buy ul{position:relative;left:5px;}
.how_buy a{color:#fff;}
.how_buy li{width:297px;border-right:4px solid #fff;position:relative;float:left;overflow:hidden;cursor:pointer;}
.hb_link:hover{text-decoration:none;color:#fff;}
/*遮罩背景*/
.hbli_mask{height:80px;width:100%;position:absolute;bottom:20px;left:0;z-index:2;background:#000;filter:Alpha(opacity=30);opacity:0.3;}
/*简述*/
.hbli_resume{height:70px;width:100%;position:absolute;bottom:20px;left:0;z-index:3;line-height:1.8;padding-top:10px;padding-left:15px;color:#fff;}
/*最窄时背景层*/
.hbli_ico{height:246px;text-align:center;padding-top:1px;width:193px;}
.hbli_ico1{background:#c3a27e;}
.hbli_ico2{background:#f1b849;}
.hbli_ico3{background:#ff6633;}
.hbli_ico4{background:#878373;}
.hbli_ico img{margin-top:35px;}
.hbli_ico3 img{margin-top:25px;}
.hbli_tip{position:absolute;z-index:0;left:468px;top:0;width:12px;height:247px;display:none;background:url(http://pimg1.4008000000.com/app_p_w_picpaths/4008000000/v20/index/hbli_ico_bg.png) no-repeat;_background:url(http://pimg1.4008000000.com/app_p_w_picpaths/4008000000/v20/index/hbli_ico_bg.gif) no-repeat;}
.hb_li1 .hbli_tip{background-position:right top;}
.hb_li2 .hbli_tip{background-position:right -250px;}
.hb_li3 .hbli_tip{background-position:right -500px;}
.hb_li4 .hbli_tip{background-position:right -750px;}
/*当前li样式*/
.hbli_cur_con{position:absolute;width:420px;left:32px;top:15px;z-index:3;color:#fff;}
.hbli_box_link,.hbli_box_link:hover {display:inline-block;*display:inline;*zoom:1;text-decoration:none;}
.hblicc_title {min-height:80px;_height:80px;}
.hblicc_recommend{height:38px;}
.hbliccr_title{line-height:30px;width:95px;color:#fff;}
.hbliccr_con{display:inline-block;*display:inline;*zoom:1;width:310px;line-height:19px;}
.hblicc_buy{margin-top:25px;position:relative;}
.hblicc_buy a,.hblicc_buy a:hover{display:inline-block;*display:inline;*zoom:1;width:144px;color:#f63;text-align:center;line-height:45px;background:#fff;position:absolute;top:8px;right:0;font-size:18px;}
.hb_li1{background:url(http://pimg1.4008000000.com/app_p_w_picpaths/4008000000/v20/index/hb_li_bg1.jpg) top right no-repeat;}
.hb_li2{background:url(http://pimg1.4008000000.com/app_p_w_picpaths/4008000000/v20/index/hb_li_bg2.jpg) top right no-repeat;}
.hb_li3{background:url(http://pimg1.4008000000.com/app_p_w_picpaths/4008000000/v20/index/hb_li_bg3.jpg) top right no-repeat;}
.hb_li4{background:url(http://pimg1.4008000000.com/app_p_w_picpaths/4008000000/v20/index/hb_li_bg4.jpg) top right no-repeat;}
-
新手司机
驾龄在2年以下的车主朋友 -
女性司机
需独立驾驶出行的女性司机 -
家庭一族
经常带家人出行的车主朋友 -
测试一族
快来戳我测一测
(function(){
var t=600,
t2=200;
$('.how_buy li').hover(function(){
var _this=$(this);
$(this).stop().animate({'width':610},t)
.find('.hbli_ico').stop().animate({'width':468},t+10,function(){
_this.find('.hbli_tip').show();
})
.find('img').hide()
.end().siblings('.hbli_cur_con').fadeIn(t2)
.siblings('.hbli_resume').fadeOut(t2);
$(this).siblings('li').stop().animate({'width':193},t)
.find('.hbli_ico').stop().animate({'width':193},t+10)
.find('img').show()
.end().siblings('.hbli_tip').hide()
.end().siblings('.hbli_cur_con').fadeOut(t2)
.siblings('.hbli_resume').fadeIn(t2);
});
$('.how_buy').hover(function(){},function(){
$('.how_buy li').stop().animate({'width':297},t)
.find('.hbli_ico').stop().animate({'width':193},t+10)
.find('img').show()
.end().siblings('.hbli_tip').hide()
.siblings('.hbli_cur_con').fadeOut(t2)
.siblings('.hbli_resume').fadeIn(t2);
});
})();