Html
    Css
    Js
* {
	margin:0;
	padding:0;
}
ul,ol {
	list-style:none;
}
a {
	text-decoration:none;
}
.box {
	width:1188px;
	height:300px;
	margin:50px auto
}
.box li {
	float:left;
	margin-right:6px;
}
/*每一个a划过前的大小*/
.box li a {
	display:block;
	width:137px;
	height:300px;
	background:url(images/png32.fw.png);
	color:#fff;
}
/*第一个a划过前的大小*/
.box .lis1 a {
	width:330px;
	background:none;
}
/*最后一个li的margin为0*/
.box .lis7 {
	margin:0;
}
/*划过box 时第一个li大小变小*/
.box:hover .lis1 a {
	width:137px;
}
/*每一个a划过后的大小*/
.box li a:hover {
	width:330px;
	background:none;
}
.box li a dl {
	padding:30px 10px 0;
}
.box li a dl dt {
	border-bottom:1px solid #fff;
	height:25px;
	margin-bottom:10px;
}
.lis1 {
	background-image:url(http://www.jq22.com/img/cs/500x300-1.png);
}
.lis2 {
	background-image:url(http://www.jq22.com/img/cs/500x300-2.png);
}
.lis3 {
	background-image:url(http://www.jq22.com/img/cs/500x300-3.png);
}
.lis4 {
	background-image:url(http://www.jq22.com/img/cs/500x300-4.png);
}
.lis5 {
	background-image:url(http://www.jq22.com/img/cs/500x300-5.png);
}
.lis6 {
	background-image:url(http://www.jq22.com/img/cs/500x300-6.png);
}
.lis7 {
	background-image:url(http://www.jq22.com/img/cs/500x300-7.png);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

炫酷的手风琴效果

利用css3的属性实现的手风琴效果,无js代码。

0