haonav

前端开发之路

页面点击显示隐藏元素延时跳转

<div id="mainer-list">
    <ul>
        <li>
            <span>
                <a href="http://localhost/index.php?ie=2-340-265-1">
                    <img src="http://localhost/images/image/201804/20180413104415_41467.png" border="0">
                </a>
            </span>
            <div class="hover-opacity">
                <a href="" target="_blank">
                    <div class="hover-inner">
                        <h4>测试</h4>
                        <span>&gt;</span>
                        <h6>副标题</h6>
                        <h5>2018-04-13</h5>
                    </div>
                </a>
            </div>
        </li>
    </ul>
</div>
<script type="text/javascript">
    $(function(){
        $("#mainer-list ul li span a").click(function(e){
            e.preventDefault();
            aHref=$(this).attr("href");
            $(this).parents().children('.hover-opacity').show().parents().siblings().children('.hover-opacity').hide();
            setTimeout(function(){
               location.href=aHref;
            },3000)
        })
    })
</script>
/*Less写入*/
#mainer-list{
  width: 96%;
  margin: 0 auto;
  ul{
    li{
      width: 100%;
      margin: 18px auto;
      position: relative;
      span{
        display: block;
        width: 90%;
        height: 40%;
        margin: 0 auto;
        a{
          display: block;
          img{
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }
      .hover-opacity{
        display: none;
        width: 90%;
        height: 100%;
        position: absolute;
        top:0;
        left:5%;
        margin: 0 auto;
        a{
          display: block;
          width: 100%;
          height: 100%;
          background: #FEFEFE;
          margin: 0 auto;
          text-align:left;
          text-indent:42px;
          color: #2C2C2C;
          .hover-inner{
            width: 100%;
            h4,h5,h6{
              font-weight:500;
              color: #3a3a3a;
              line-height: 20px;
            }
            h4{
              font-size:14px;
              color: #3a3a3a;
              font-weight:500;
              padding-top:30px;
            }
            .h4{
              font-size:14px;
            }
            span{
              display: block;
              width: 100%;
              height: auto;
              color: #999;
            }
          }
        }
      }
    }
  }
}

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haonav/article/details/79975932
个人分类: JavaScript WEB HTML css
上一篇阻止冒泡
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭