console
function(t, i) {
var e = {
id: "#cardArea",
sid: ".card-item"
};
i.fn.cardArea = function(t) {
var t = i.extend({},
e, t);
return this.each(function() {
var e = i(t.id),
n = e.find(t.sid);
n.on("mouseenter", function() {
i(this).addClass("active").siblings().removeClass("active")
})
})
};
} (window, jQuery);
$(function() {
$("#cardArea").cardArea()
});
<div class="accordion_box">
<ul id="cardArea" class="card-area clearfix">
<li class="card-item active">
<div class="card">
<div class="card-title title-even">
<div class="content">
<div class="zq-product-img">
<i class="zq-icon icon40x40 crad-area-icon1">
</i>
</div>
<p class="h1">
网站与门户
</p>
<p class="short-info">
连接内外 覆盖多端
</p>
</div>
</div>
<div class="card-content content-first bg-e8e8e8">
<ul class="content-first-list">
<li>
全网门户
</li>
<li>
企业域名
</li>
</ul>
</div>
<div class="card-content content-second">
<div class="main-info">
<a href="#" target="_blank" class="no-effect">
<p class="main-head">
全网门户
</p>
</a>
<p class="main-tip">
全网企业客户触达、获取商机、达成业务
</p>
<p class="main-desc">
使用企业门户进行客户信息管理、销售线索管理，让您随时随地更轻松地获取新的潜在客户，更快捷地完成业务。
</p>
<a href="#" target="_blank">
<button class="main-btn">
了解详情
</button>
</a>
</div>
<ul class="other-info clearfix">
<li class="other-info-list">
<a href="#" target="_blank" class="no-effect">
<h3 class="other-head">
企业域名
</h3>
<p class="other-desc">
注域名，享安全服务
</p>
</a>
<i class="zq-icon icon17x17 c-a-arrow">
</i>
</li>
</ul>
</div>
</div>
</li>
<li class="card-item">
<div class="card">
<div class="card-title title-even">
<div class="content">
<div class="zq-product-img">
<i class="zq-icon icon40x40 crad-area-icon2">
</i>
</div>
<p class="h1">
营销与推广
</p>
<p class="short-info">
全景覆盖 经济之选
</p>
</div>
</div>
<div class="card-content content-first bg-e1e1e1">
<ul class="content-first-list">
<li>
营销宝
</li>
<li>
大把推
</li>
<li>
易米通
</li>
<li>
Google Adwords
</li>
</ul>
</div>
<div class="card-content content-second">
<div class="main-info">
<a href="#" target="_blank" class="no-effect">
<p class="main-head">
营销宝
</p>
</a>
<p class="main-tip">
多场景营销智能工具集
</p>
<p class="main-desc">
使用中企营销宝进行营销，不论是活动组织、营销推广，还是企业宣传、产品售卖、热点跟踪，让您随时随地便捷的开展营销，提升品牌形象与影响力。
</p>
<a href="market/" target="_blank">
<button class="main-btn">
了解详情
</button>
</a>
</div>
<ul class="other-info clearfix">
<li class="other-info-list">
<a href="#" target="_blank" class="no-effect">
<h3 class="other-head">
大把推
</h3>
<p class="other-desc">
让更多客户找到你
</p>
</a>
<i class="zq-icon icon17x17 c-a-arrow">
</i>
</li>
<li class="other-info-list">
<a href="#" target="_blank" class="no-effect">
<h3 class="other-head">
易米通
</h3>
<p class="other-desc">
国内创新的数字营销平台
</p>
</a>
<i class="zq-icon icon17x17 c-a-arrow">
</i>
</li>
<li class="other-info-list">
<a href="#" target="_blank" class="no-effect">
<h3 class="other-head">
Google Adwords
</h3>
<p class="other-desc">
助力您的海外拓金之路
</p>
</a>
<i class="zq-icon icon17x17 c-a-arrow">
</i>
</li>
</ul>
</div>
</div>
</li>
<li class="card-item">
<div class="card">
<div class="card-title title-even">
<div class="content">
<div class="zq-product-img">
<i class="zq-icon icon40x40 crad-area-icon3">
</i>
</div>
<p class="h1">
电商与业务
</p>
<p class="short-info">
在线业务 轻松实现
</p>
</div>
</div>
<div class="card-content content-first bg-e8e8e8">
<ul class="content-first-list">
<li>
ZshopS
</li>
</ul>
</div>
<div class="card-content content-second">
<div class="main-info">
<a href="#" target="_blank" class="no-effect">
<p class="main-head">
ZshopS
</p>
</a>
<p class="main-tip">
为中小企业搭建独立电商平台，提供行业电商解决方案。
</p>
<p class="main-desc">
商城提供安全稳定、易用高效的在线零售管理系统，后台简单易用，购物体验流畅，促销方式灵活，数据统计分析嵌入业务各个环节，根据访问记录深入分析，随时随地呈现统计结果指导决策。帮助传统企业顺利开展线上零售业务，强化数字分析与营销推广，降低业务成本，树立企业品牌，扩大企业收益渠道。
</p>
<a href="#" target="_blank">
<button class="main-btn">
了解详情
</button>
</a>
</div>
</div>
</div>
</li>
<li class="card-item">
<div class="card">
<div class="card-title title-even">
<div class="content">
<div class="zq-product-img">
<i class="zq-icon icon40x40 crad-area-icon4">
</i>
</div>
<p class="h1">
协同与管理
</p>
<p class="short-info">
连接互通 简便开放
</p>
</div>
</div>
<div class="card-content content-first bg-e1e1e1">
<ul class="content-first-list">
<li>
Z云邮
</li>
<li>
有翼云销
</li>
</ul>
</div>
<div class="card-content content-second">
<div class="main-info">
<a href="#" target="_blank" class="no-effect">
<p class="main-head">
Z云邮
</p>
</a>
<p class="main-tip">
专注企业办公效率的提升，云“游”四海的企业邮箱
</p>
<p class="main-desc">
帮企业提高工作效率的企业邮箱：支持微信收发信件、超大企业共享网盘，多维度的邮箱管理功能等。并且，在海外部署了多达34个收发节点，国内部署节点28个，让企业的重要邮件，全球畅“游”。
</p>
<a href="#" target="_blank">
<button class="main-btn mr20">
了解详情
</button>
</a>
<a href="#" target="_blank">
<button class="main-white-btn">
立即试用
</button>
</a>
</div>
<ul class="other-info clearfix">
<li class="other-info-list">
<a href="#" target="_blank" class="no-effect">
<h3 class="other-head">
有翼云销
</h3>
<p class="other-desc">
有效提升销售业绩和转化率
</p>
</a>
<i class="zq-icon icon17x17 c-a-arrow">
</i>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a,
img {
border: 0;
text-decoration: none;
}
body {
font: 12px Arial, Helvetica, sans-serif, "新宋体";
}
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden
}
.clearfix {
display: inline-block
}
* html .clearfix {
height: 1%
}
.clearfix {
display: block
}
.clearfix:after,
.fix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
.clearfix {
zoom: 1
}
.mr20 {
margin-right: 20px
}
.zq-icon {
display: inline-block;
background: url(../images/icon.png) no-repeat;
}
.icon40x40 {
width: 40px;
height: 40px
}
.crad-area-icon1 {
background-position: 0 0
}
.crad-area-icon2 {
background-position: -40px 0
}
.crad-area-icon3 {
background-position: -80px 0
}
.crad-area-icon4 {
background-position: -120px 0
}
.accordion_box {
height: 580px;
width: 1020px;
padding: 10px;
overflow: hidden;
}
.card-area {
margin: 60px auto 0;
height: 560px;
width: 1000px;
position: relative;
}
.card-area .bg-e8e8e8 {
background: #e8e8e8
}
.card-area .bg-e1e1e1 {
background: #e1e1e1
}
.card-area .card-item {
z-index: 4;
transition: all .3s cubic-bezier(.4, 0, .2, 1), z-index 0s .12s;
position: relative;
float: left;
width: 17%;
height: 521px;
background-color: transparent
}
.card-area .card-item+.card-item {
margin-left: -1px
}
.card-area .card-item .card {
transition: all .3s cubic-bezier(.4, 0, .2, 1), z-index 0s .12s;
width: 100%;
height: 100%;
text-align: center;
background: #fff
}
.card-area .card-item .card .card-content {
width: 100%;
line-height: 2
}
.card-area .card-item .card .card-content.content-first {
transition: all .12s cubic-bezier(.4, 0, .2, 1) .18s;
z-index: 3;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=(100))
}
.card-area .card-item .card .card-content.content-second {
transition: all .12s cubic-bezier(.4, 0, .2, 1) 0s;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=(0));
line-height: 2
}
.card-area .card-item .card .card-content.content-second li {
float: left;
width: 50%
}
.card-area .card-item .card .card-content,
.card-area .card-item .card .card-title {
position: absolute;
left: 0;
right: 0;
z-index: 1
}
.card-area .card-item .card .card-title {
padding-top: 1px;
transition: all .3s cubic-bezier(.4, 0, .2, 1), z-index 0s .12s;
height: 145px;
line-height: 26px;
font-size: 14px;
top: 0;
background: #1b77b9;
border-left: 1px solid #3285c0
}
.card-area .card-item .card .card-title .content {
position: absolute;
bottom: -2px;
width: 100%
}
.card-area .card-item .card .card-title .h1 {
font-size: 22px;
font-weight: 700;
color: #d9efff;
margin-bottom: 0
}
.card-area .card-item .card .card-title .short-info {
color: #8dbbdc;
font-size: 14px;
margin-top: 0;
margin-bottom: 20px
}
.card-area .card-item .card .card-title .zq-product-img {
width: 40px;
height: 40px;
margin: 10px auto;
position: relative
}
.card-area .card-item .card .card-title .zq-product-img img {
position: absolute;
left: 0;
width: 100%
}
.card-area .card-item .card .card-title .zq-product-img .un-hover {
z-index: 1;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=(100))
}
.card-area .card-item .card .card-title .zq-product-img .with-hover {
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=(0))
}
.card-area .card-item .card .card-title .short-info,
.card-area .card-item .card .card-title .zq-product-img img,
.card-area .card-item .card .card-title .h1 {
transition: all .15s cubic-bezier(.4, 0, .2, 1) 0s
}
.card-area .card-item .card .card-content {
height: 376px;
position: absolute;
top: 145px
}
.card-area .card-item .card .card-content.content-first .content-first-list {
width: 100%;
max-width: 250px;
font-size: 16px;
color: #373d41;
margin-top: 47px;
margin-bottom: 47px
}
.card-area .card-item .card .card-content.content-first .content-first-list li {
margin-bottom: 30px
}
.card-area .card-item .card .card-content.content-second {
width: 90%;
left: 25px;
font-size: 14px;
color: #a9b0b4;
text-align: left;
padding-top: 26px
}
.card-area .card-item .card .card-content.content-second .main-head {
color: #3db1ea;
font-size: 18px;
line-height: 28px;
margin-bottom: 10px
}
.card-area .card-item .card .card-content.content-second p {
margin: 5px 0
}
.card-area .card-item .card .card-content.content-second .main-tip {
color: #232933
}
.card-area .card-item .card .card-content.content-second .main-desc {
color: #8c8c8c;
font-size: 12px;
line-height: 22px
}
.card-area .card-item .card .card-content.content-second .main-btn {
cursor: pointer;
width: 160px;
height: 38px;
font-size: 16px!important;
color: #fff;
margin-top: 22px;
margin-bottom: 33px;
border-radius: 19px;
background: #3db1ea;
border: none;
transition: color .3s ease-in-out, background .3s ease-in-out
}
.card-area .card-item .card .card-content.content-second .main-btn:hover {
color: #fff;
background: #1b77b9
}
.card-area .card-item .card .card-content.content-second .main-white-btn {
cursor: pointer;
width: 160px;
height: 36px;
border: 1px solid #3db1ea;
font-size: 16px!important;
color: #3db1ea;
margin-top: 22px;
margin-bottom: 33px;
border-radius: 19px;
background: #fff;
transition: color .3s ease-in-out, background .3s ease-in-out
}
.card-area .card-item .card .card-content.content-second .main-white-btn:hover {
color: #fff;
background: #3db1ea
}
.card-area .card-item .card .card-content .other-info {
width: 105%;
height: 70px;
overflow: hidden;
line-height: 22px;
padding-top: 20px;
font-size: 12px
}
.card-area .card-item .card .card-content .other-info .other-info-list {
width: 32%;
height: 70px;
background: #f2f2f2;
margin-right: 25px;
padding: 0 0 0 10px;
position: relative;
}
.card-area .card-item .card .card-content .other-info .other-info-list .c-a-arrow {
position: absolute;
right: 10px;
top: 15px;
background-position: -200px 0
}
.card-area .card-item .card .card-content .other-info .other-info-list:hover {
background: #3db1ea
}
.card-area .card-item .card .card-content .other-info .other-info-list:hover .c-a-arrow {
background-position: -200px -17px
}
.card-area .card-item .card .card-content .other-info .other-info-list:hover .other-desc,
.card-area .card-item .card .card-content .other-info .other-info-list:hover .other-head {
color: #fff
}
.card-area .card-item .card .card-content .other-info .other-info-list .list-context {
color: #00c1de
}
.card-area .card-item .card .card-content .other-info .other-head {
font-size: 16px;
font-weight: 400;
color: #000;
margin: 13px 0 0 0;
}
.card-area .card-item .card .card-content .other-info .other-desc {
margin-top: 2px;
font-size: 12px;
color: #999
}
.card-area .card-item.active {
z-index: 6;
box-shadow: 0 0 30px rgba(0, 0, 0, .2);
width: 49%;
height: 535px
}
.card-area .card-item.active .card .card-title {
background-color: #3db1ea;
height: 159px;
top: -15px;
border: none
}
.card-area .card-item.active .card .card-title .short-info {
color: #9ed8f5
}
.card-area .card-item.active .card .card-title h1 {
color: #fff
}
.card-area .card-item.active .card .card-content.content-first {
transition: all .12s cubic-bezier(.4, 0, .2, 1) 0s;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=(0))
}
.card-area .card-item.active .card .card-content.content-second {
transition: all .12s cubic-bezier(.4, 0, .2, 1) .18s;
z-index: 3;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=(100))
}