一个手风琴css3效果，如何做到只有移到第二格才有图2效果，鼠标移在13格还是图一的效果

html-css027

一个手风琴css3效果，如何做到只有移到第二格才有图2效果，鼠标移在13格还是图一的效果,第1张

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title></title>

<style>

*{

margin: 0

padding: 0

}

ul li{

display: block

list-style-type: none

width: 500px

height: 60px

}

#li1,#li3{

background: #09C703

}

#li2{

background: #3eebff

-webkit-transition: height .3s linear

-moz-transition: height .3s linear

-o-transition: height .3s linear

transition: height .3s linear

}

#li2:hover{

height: 300px

}

</style>

</head>

<body>

<div>

<ul>

<li id="li1"> </li>

<li id="li2"> </li>

<li id="li3"> </li>

</ul>

</div>

</body>

</html>

望采纳

css固定宽度使用width属性来定义即可，如下这个案例。

<div class="box">这是一个宽度为300px的div</div> .box{width:300pxheight:200pxborder:1px solid #333}

这样子class名为box的这个div宽度就固定在了300px。