div用css显示隐藏的效果

<div><a href="#">一级导航</a><p><a href="#">二级导航</a><a href="#">二级导航</a><a href="#">二级导航</a></p>
</div>

这样的结构写法在我们的页面中一开始是所有的导航都是显示的

我们想要实现一开始只显示一级导航效果，当鼠标划上一级导航的时候显示二级导航效果

方法一：用display:none;和display：block;方式实现

一开始给p标签一个display:none;

当鼠标划上div时让p标签显示 div:hover p{display:block;}

注意：此方式可以实现显示和隐藏的效果，但是不支持过渡效果，也就是你不能看到逐渐显示的过程

方法二：用opacity：0； opacity：1方式实现

一开始给p标签一个opacity:0;

当鼠标划上div时让p标签显示 div:hover p{opacity:1;}

注意：此方式可以实现显示和隐藏的效果，支持过渡效果，在p标签的初始状态上加上一个transition:1s; 你是可以看到从无到有淡入淡出的效果的

方法三：用height：0； height：100px方式实现

一开始给p标签添加一个height:0; 但是由于里面有二级菜单的内容文字所以会存在溢出，添加一个overflow：hidden即可解决

当鼠标划上div时让p标签显示 div:hover p{height:100px;}

注意：此方式可以实现显示和隐藏的效果，支持过渡效果，在p标签的初始状态上加上一个transition:1s; 你是可以看到类似于卷帘门从上向下拉的效果。

div用css显示隐藏的效果相关推荐

css显示隐藏的方法
1. CSS显示隐藏的方法 display: - none:隐藏该元素并且该元素所占的空间也不存在了. - block; 显示元素 visibility:(v 热倍了忒) - hidden 隐藏 ...
css中显示隐藏div层,JS CSS 显示隐藏DIV 层
匿名用户 1级 2011-01-12 回答调整了下标签的位置一般js要放在css后面最好js放在dom最后,等待dom解释完毕再执行js代码无标题文档 #div1{ border:1px #0 ...
js + jquery 两栏Tab鼠标移入显示/隐藏的效果（详）
学习文献: 必须要掌握的原生JS实现JQuery 了解了这些才能开始发挥jQuery的威力 - 谦行 – JavaScript和jQuery两款TAB选项卡示例 -- 西门 jquery原创分享社区 ...
html5 js 隐藏div,javascript如何显示隐藏div
javascript显示隐藏div的方法:创建一个showhidediv的方法,直接跟ID属性调用,代码为[var sbtitle=document.getElementById(id)]. 本教程操 ...
用css显示隐藏的文字,用CSS隐藏文字方法的比较
通过CSS来隐藏文字是网站设计做常用的方法, 有多种方法可以达到隐藏文字的目的. 这些方法各有优点和缺点, 下面就来看看这些用CSS隐藏文字的一. CSS语句:display:none 这种方法就是 ...
android view显示隐藏动画效果,Android 根据手势顶部View自动展示与隐藏效果
首先来看一下效果: 大体思路如下: 总体布局用了一个自定义的ViewGroup,里面包了两个View(top View,bottomView) 我在bottomView里放了ViewPager,里面又 ...
js控制div滚动条的显示/隐藏
滚动条显示 document.getElementById("keyCard").style.overflow = "auto"; 滚动条隐藏 document ...
AngularJS中实现显示或隐藏动画效果的3种方式
本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果思路: →npm install angular-anima ...
11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

div用css显示隐藏的效果

div用css显示隐藏的效果相关推荐

最新文章

热门文章