两个css代码实现划过就下拉显示隐藏的内容，离开又隐藏

有的人要实现这样的功能，总是搞得很复杂，不是js，就是一大堆代码。其实，css，两句代码就能搞定。

首先，来看演示：

试后，你看到了吧。鼠标移开后一定时间内就收回

代码很简单，只要先将某个div定义一个类，然后设置类的两句css就行了。

比如我上面的，html代码是：

<div class="zrg">点我就能看到下拉隐藏内容<br>我就是下拉的隐藏内容了<br>我是第二行<br>如果你移开鼠标<br>我三秒钟后就缩回<br>我是第五行</div>

那么我的css代码如下：

.zrg{
transition: all 3s ease;//设定收回时间为3秒
overflow: hidden;//设定收回就隐藏
height: 20px;
}            
.zrg:hover{
height: 100%;
}

是不是很简单，主要就是我那两句做解释的代码而已

点击数：605