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

3 篇文章 0 订阅
1 篇文章 0 订阅
<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;
            }
          }
        }
      }
    }
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值