CSS
<style type="text/css">
ul, ol, li {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
<style type="text/css">
.ebox {
width: 500px;
height: 100%;
display: table;
border: 1px solid #DDD;
}
.ebox-i {
position: relative;
float: left;
width: 50%;
padding: 15px 15px 20px;
color: #777;
border-bottom: 1px dashed #DDD;
font-size: 12px;
text-align: center;
line-height: 1.42857;
}
.ebox-i:hover {
background-color: #F9F9F9;
}
.ebox-01, .ebox-03 {
border-right: 1px dashed #DDD;
}
.ebox-100 {
width: 100%;
margin-bottom: 0px;
border-bottom: medium none;
}
</style>
JS
<script type="text/javascript">
$(".ebox-i").each(function() {
$(this).hover(
function() {
$(this).find(".desc").animate({height: '100%', opacity: 'show'});
},
function() {
$(this).find(".desc").animate({height: '0', opacity: 'hide'});
}
);
});
</script>
页面
<ul class="ebox">
<li class="ebox-i ebox-01">
<h4>视觉中国</h4>
<p>视觉创意产业门户</p>
</li>
<li class="ebox-i ebox-02">
<h4>视觉中国</h4>
<p>视觉创意产业门户</p>
</li>
<li class="ebox-i ebox-03">
<h4>视觉中国</h4>
<p>视觉创意产业门户</p>
</li>
<li class="ebox-i ebox-04">
<h4>视觉中国</h4>
<p>视觉创意产业门户</p>
</li>
<li class="ebox-i ebox-100">
<h4>主题定制</h4>
<p>完全按照您的需求量身打造,此项服务需要排期,具体请联系我们</p>
<a class="btn btn-danger" href="">联系我们</a>
</li>
</ul>
显示效果