过渡转换
当鼠标指示外框时显示隐藏内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} ul,ol,li{list-style: none;} a{text-decoration: none;color: black;} .box{width: 300px;height: 30px;line-height: 30PX;} .F1,.F2,.F3{width: 300px;height: 30px; border-bottom: 1px solid blue; background-color: lightskyblue;} .T1,.T2,.T3{width: 300px;background-color:lightgray;overflow:hidden;height: 0px;transition:height 1s ease;} .T1,.T2,.T3{} .M1:hover .T1{height:100px;} .M2:hover .T2{height: 160px;} .M3:hover .T3{height:230px;} </style> </head> <body> <div class="box"> <ul class="M1"> <li class="F1">First Menu</li> <li class="T1">Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that ne show they decide if they're going to make more shows. </li> </ul> <ul class="M2"> <li class="F2">Second Menu</li> <li class="T2">Like you, I used to think the world was this great place where everybody livedby the same standards I did,then sone kid with a nail showed ne I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </li> </ul> <ul class="M3"> <li class="F3">Third Menu</li> <li class="T3">You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know hat seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two,but it wasn't. Nature is lethal but it doesn't hold a candle to man. </li> </ul> </div> </body> </html>
