jQuery信用服務卡片層疊布局代碼

使用方法：

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">適用于線上線下全渠道的物品租賃模式，提升租賃業(yè)務量和運營效率。</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>提升企業(yè)競爭力</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">適用于線上線下全渠道的傳統(tǒng)租車、分時租賃模式，降低運營成本并提升租車訂單量。</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>提升企業(yè)競爭力</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>提升企業(yè)競爭力</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">適用于租房平臺短租業(yè)務，客戶體驗提升帶來業(yè)務量的增長。</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>提升企業(yè)競爭力</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>