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

html-css010

一个手风琴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>

望采纳

在网页head标签里面加一句

<style>

a{ color:#ffftext-decoration:none}

</style>