页面元素的展开与自动缩回div+css

 <style>
            .test {
                width: 200px;
                height: 40px;
                overflow: hidden;
                transition: all .6s ease-in-out;
                -webkit-transition: all .6s ease-in-out;
                -moz-transition: all .6s ease-in-out;
                -o-transition: all .6s ease-in-out;
                -ms-transition: all .6s ease-in-out;
                position: relative;
            }

            .test:hover {
                height: 100%;
                background-color: #F5F5F5;

            }

        </style>

<div class="test">
内容
</div>