* {
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);
}
利用css3的属性实现的手风琴效果,无js代码。