<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.jb51.net/" />

<title>鼠标滑过触发拉窗式JS效果</title>

<link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v20/base.css" />

<link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v20/public.css"/>

<style type="text/css">

.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;}

</style>

<script type="text/javascript" src="http://pscript1.4008000000.com/app_js/paui/1.0.1/build/pa.ui.min.js"></script>

</head>

<body>

<div class="how_buy">

<ul class="c">

<li class="hb_li1">

  <p class="hbli_mask"></p>

  <p class="hbli_resume">

    <span class="f20 fwb">新手司机</span><br /><span class="f14">驾龄在2年以下的车主朋友</span>

  </p>

  <div class="hbli_ico hbli_ico1">

    <img src="http://pimg1.4008000000.com/app_p_w_picpaths/4008000000/v20/index/hbli_ico1.gif" alt="新手司机" />

  </div>

  <div class="hbli_tip"></div>

  

  <div class="hbli_cur_con dsn">

    <a href="http://www.4008000000.com/zaixiangoumai/chexian/xinshou.shtml" otitle="新手司机-车险如何购买" otype="button" target="_blank" class="hbli_box_link">

    <p class="hblicc_title f18 fwb">新手上路，满满都是惊吓，如何给自己和爱车更好的保障？</p>

    <p class="hblicc_recommend c">

      <span class="fl hbliccr_title f18 fwb">重磅推荐：</span>

      <span class="fl hbliccr_con f14">全面商业险及附加险保障，只买对不买贵，如果是新车，网上买还比4S店划算啊</span>

    </p>

    </a>

    <p class="hblicc_buy">

      <a href="http://www.4008000000.com/zaixiangoumai/chexian/xinshou.shtml" id="T-ljgm1" otitle="去看看-新手司机-车险如何购买" otype="button" target="_blank">去看看</a>

    </p>

  </div>

</li>


<li class="hb_li2">

  <p class="hbli_mask"></p>

  <p class="hbli_resume">

    <span class="f20 fwb">女性司机</span><br /><span class="f14">需独立驾驶出行的女性司机</span>

  </p>

  <div class="hbli_ico hbli_ico2">

    <img src="http://pimg1.4008000000.com/app_p_w_picpaths/4008000000/v20/index/hbli_ico2.gif" alt="女性司机" />

  </div>

  <div class="hbli_tip"></div>

  

  <div class="hbli_cur_con dsn">

  <a href="http://www.4008000000.com/zaixiangoumai/chexian/nvxing.shtml" otitle="女性司机-车险如何购买" otype="button" target="_blank" class="hbli_box_link">

    <p class="hblicc_title f18 fwb">路上状况多，万一发生了交通意外、车辆抛锚，我该如何处理？</p>

    <p class="hblicc_recommend c">

      <span class="fl hbliccr_title f18 fwb">重磅推荐：</span>

      <span class="fl hbliccr_con f14">合适的商业险及附加险，更加全面的保障，同时还有免费道路救援服务，路上情况，一步解决。</span>

    </p>

    </a>

    <p class="hblicc_buy">

      <a href="http://www.4008000000.com/zaixiangoumai/chexian/nvxing.shtml" id="T-ljgm2" otitle="去看看-女性司机-车险如何购买" otype="button" target="_blank">去看看</a>

    </p>

  </div>

</li>


<li class="hb_li3">

  <p class="hbli_mask"></p>

  <p class="hbli_resume">

    <span class="f20 fwb">家庭一族</span><br /><span class="f14">经常带家人出行的车主朋友</span>

  </p>

  <div class="hbli_ico hbli_ico3">

    <img src="http://pimg1.4008000000.com/app_p_w_picpaths/4008000000/v20/index/hbli_ico3.gif" alt="家庭一族" />

  </div>

  <div class="hbli_tip"></div>

  

  <div class="hbli_cur_con dsn">

    <a href="http://www.4008000000.com/zaixiangoumai/chexian/jiating.shtml" otitle="家庭一族-车险如何购买" otype="button" target="_blank" class="hbli_box_link">

    <p class="hblicc_title f18 fwb">闲暇时，会带上家人自驾出行，买车险，除了对车的保障，还看重对家里人的保护</p>

    <p class="hblicc_recommend c">

      <span class="fl hbliccr_title f18 fwb">重磅推荐：</span>

      <span class="fl hbliccr_con f14">完善的商业险及附加险保障，加上意外险的组合购买，保车保人，一招搞掂</span>

    </p>

    </a>

    <p class="hblicc_buy">

      <a href="http://www.4008000000.com/zaixiangoumai/chexian/jiating.shtml" id="T-ljgm3" otitle="去看看-家庭一族-车险如何购买" otype="button" target="_blank">去看看</a>

    </p>

  </div>

</li>


<li class="hb_li4">

  <p class="hbli_mask"></p>

  <p class="hbli_resume">

    <span class="f20 fwb">测试一族</span><br /><span class="f14">快来戳我测一测</span>

  </p>

  <div class="hbli_ico hbli_ico4">

    <img src="http://pimg1.4008000000.com/app_p_w_picpaths/4008000000/v20/index/hbli_ico4.gif" alt="测试一族" />

  </div>

  <div class="hbli_tip"></div>

  

  <div class="hbli_cur_con dsn">

  <a href="http://www.4008000000.com/fuwuzhongxin/chexian/xqfx/index.shtml" otitle="快来戳我测一测-车险如何购买" otype="button" target="_blank" class="hbli_box_link">

    <p class="hblicc_title f18 fwb">只需几步，帮您搭配最合适的险种套餐<br>网上买车险，就是这么简单</p>

    <p class="hblicc_recommend c"></p>

    </a>

    <p class="hblicc_buy">

      <a href="http://www.4008000000.com/fuwuzhongxin/chexian/xqfx/index.shtml" id="T-ljgm4" otitle="快来戳我测一测-测试一族-车险如何购买" otype="button" target="_blank">快来戳我测一测</a>

    </p>

  </div>

</li>

</ul>

</div>


<script>

 (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);

   });

  })();

</script>

</body>

</html>