温馨提示:网站使用自适应技术,手机与电脑显示界面不同,电脑界面显示效果更佳。

做了个小站,积累一些技术,分享一些原创
    体会生活,记录一些小随笔,闲说心得

两个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%;
}

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

点击数:70

你可能也喜欢下面相关文章:

发表评论

您的电子邮箱地址不会被公开。

如果涉及回复可见内容,请务必保留下面勾选保存浏览器,才能回复后你可见,否则无效