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