jQuery基于css3属性制作商家信用服务列表卡片层叠，通过鼠标悬停卡片放大突出显示。适合产品项目简介内容布局代码。
使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
2、head引入js文件
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
3、body引入HTML代码
<div class="m-product-panel" style="background-image: url(statics/images/bg.jpg);">
<h3 class="c-title-large light">
<p class="c-title-main">为您提供的信用服务</p>
</h3>
<div class="c-wrapper">
<ul class="c-row m-product-panel-list">
<li class="c-col6 active">
<div>
<a href="#">
<h4 class="c-line-clamp">商品租赁</h4>
<p class="m-product-panel-list-note">适用于线上线下全渠道的物品租赁模式，提升租赁业务量和运营效率。</p>
<ul class="m-product-panel-list-detail">
<li>
<i class="c-icon"></i><span>促进商家获客</span>
</li>
<li>
<i class="c-icon"></i><span>降低运营风险</span>
</li>
<li>
<i class="c-icon"></i><span>提升企业竞争力</span>
</li>
</ul>
<p class="m-product-panel-list-button"><button>查看详情</button></p>
</a>
</div>
</li>
<li class="c-col6">
<div>
<a href="#">
<h4 class="c-line-clamp">汽车租赁</h4>
<p class="m-product-panel-list-note">适用于线上线下全渠道的传统租车、分时租赁模式，降低运营成本并提升租车订单量。</p>
<ul class="m-product-panel-list-detail">
<li>
<i class="c-icon"></i><span>促进商家获客</span>
</li>
<li>
<i class="c-icon"></i><span>降低运营风险</span>
</li>
<li>
<i class="c-icon"></i><span>提升企业竞争力</span>
</li>
</ul>
<p class="m-product-panel-list-button"><button>查看详情</button></p>
</a>
</div>
</li>
<li class="c-col6">
<div>
<a href="#">
<h4 class="c-line-clamp">酒店</h4>
<p class="m-product-panel-list-note">适用于酒店入驻押金减免场景，提升客户入驻体验，带来客源增涨。</p>
<ul class="m-product-panel-list-detail">
<li>
<i class="c-icon"></i><span>促进商家获客</span>
</li>
<li>
<i class="c-icon"></i><span>降低运营风险</span>
</li>
<li>
<i class="c-icon"></i><span>提升企业竞争力</span>
</li>
</ul>
<p class="m-product-panel-list-button"><button>查看详情</button></p>
</a>
</div>
</li>
<li class="c-col6">
<div>
<a href="#">
<h4 class="c-line-clamp">短租租房</h4>
<p class="m-product-panel-list-note">适用于租房平台短租业务，客户体验提升带来业务量的增长。</p>
<ul class="m-product-panel-list-detail">
<li>
<i class="c-icon"></i><span>促进商家获客</span>
</li>
<li>
<i class="c-icon"></i><span>降低运营风险</span>
</li>
<li>
<i class="c-icon"></i><span>提升企业竞争力</span>
</li>
</ul>
<p class="m-product-panel-list-button"><button>查看详情</button></p>
</a>
</div>
</li>
</ul>
<p class="m-product-panel-more">
<a href="#">查看所有信用服务</a>
</p>
</div>
</div>
<script type="text/javascript">
$(function() {
$('.m-product-panel-list li').hover(function() {
$(this).addClass('active').siblings().removeClass('active');
})
})
</script>
