问:这是怎么原理实现的?
其实就是显示和隐藏
问:那么这个现实和隐藏如何实现呢?
其实方法有很多,下面我来带着大家看一下每种实现方式和其不同点
无论使用哪一种方式实现,首先这个东西必须先存在,我们先在结构中存在
一级导航
二级导航 二级导航 二级导航
这样的结构写法在我们的页面中一开始是所有的导航都是显示的
我们想要实现一开始只显示一级导航效果,当鼠标划上一级导航的时候显示二级导航效果
方法一:用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你是可以看到从无到有淡入淡出的效果的
>need-to-insert-img
方法三:用height:0; height:100px方式实现
一开始给p标签添加一个height:0但是由于里面有二级菜单的内容文字所以会存在溢出,添加一个overflow:hidden即可解决
当鼠标划上div时让p标签显示 div:hover p{height:100px}
注意:此方式可以实现显示和隐藏的效果,支持过渡效果,在p标签的初始状态上加上一个transition:1s你是可以看到类似于卷帘门从上向下拉的效果。
哈哈是不是学到了,好了不说了,老铁们自己看着办法,反正我把方式方法都告诉大家了,是收藏还是点赞。
首先你容纳文字的容器要设置固定的宽高,然后加上以下属性white-space:
nowrap
word-break:
keep-all
text-overflow:
ellipsis
第一行的代码,是不允许文字换行
第二行的代码,是不允许把单词拆开
第三行的代码,就是文本超出容器,以省略号显示
望采纳!
原来的文字占地方吗,如果占地方就把文字颜色改成和背景式样,当鼠标移上去的时候改变文字颜色如果不占地方那就把盒子高宽设置成0,超出盒子的设为不显示,当鼠标移上去就改变盒子大小,或者允许显示盒子外边的内容