在网页中我们经常看到鼠标划上时会显示一些网页中一开始没有的东西，例如二级菜单，或者鼠标划上图片时会显示一些淡入淡出的效果 问：这是怎么原理实现的？ 其实就是显示和隐藏 问：那么这个现实和隐藏如何实现呢？ 其实方法有很多，下面我来带着大家看一下每种实现方式和其不同点
无论使用哪一种方式实现，首先这个东西必须先存在，我们先在结构中存在
这样的结构写法在我们的页面中一开始是所有的导航都是显示的我们想要实现一开始只显示一级导航效果，当鼠标划上一级导航的时候显示二级导航效果
方法一：用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; 你是可以看到从无到有淡入淡出的效果的