css自定义遮罩滑动

来源:互联网 发布:整蛊专家软件 编辑:程序博客网 时间:2024/05/16 05:32
//js
$('.pro_item').hover(function(){    $(this).find('.fous_bg').show().animate({marginTop:'0px'},1000);},function(){    $(this).find('.fous_bg').animate({marginTop:'300px'},1000);});$('.select_detail').hover(function(){    $(this).find('.btn_detail').show().animate({marginTop:'0px'},1000);},function(){    $(this).find('.btn_detail').animate({marginTop:'300px'},1000);});
//html
<div class="col-md-3 pd col-sm-3 col-xs-3 pro_item">    <ul>        <li>省行</li>        <li style="position: absolute">            <img class="imgclick" src="img/shenghang.png">        </li>        <li class="item_bg" style="position: absolute;">            <div class=" fous_bg"></div>            <div class="select_detail" style="width: 280px;height: 289px;position: absolute">                <span class="btn_detail">查看详情</span>            </div>        </li>    </ul></div>
//css
.pro_item{height:300px;position: relative}.pro_item .item_bg .fous_bg{    position: absolute;    display: none;    width:282px;height:289px;    left: 0;    /*padding-top: 80%;*/    background:black;    opacity: 0.5;}.btn_detail{    display: none;    position:absolute;    z-index: 999;    line-height: 44px;    border-radius: 2px;    font-size: 18px;    font-weight: bold;    top: 70%;    left: 27%;    width: 126px;    height: 44px;    background-color: white;    color:#cbaa77;    cursor: pointer;}

原创粉丝点击