jquery实现导航栏切换、下划线移入移出
2021-03-04 23:27
阅读：489
YPE html>
标签：长度 list console over use dir before ase 动画
这里下划线显示使用的是伪类，用hover属性触发伪类，使其显示下划线
代码如下：
width: 0; border-bottom: 2px solid blue; -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -ms-transition: width 0.5s ease-in-out; -o-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; /* 动画 */
hover触发伪类：
.navContent>p:hover::before{ /* hover触发伪类 */
width: 30px; /* 下划线最长长度 */
}
完整代码如下：
如果遇到下拉菜单无法显示的问题，请首先检查外层div是否设置了
overflow:hidden；
我就是因为这个疑惑了很久，这里标注出来，希望大家不要想我一样踩这个纯属浪费时间的坑（我也很无奈啊）。
jquery实现导航栏切换、下划线移入移出
标签：长度 list console over use dir before ase 动画
原文地址：https://www.cnblogs.com/mfbzr/p/12912058.html
文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：jquery实现导航栏切换、下划线移入移出
文章链接：http://soscw.com/index.php/essay/60203.html
文章标题：jquery实现导航栏切换、下划线移入移出
文章链接：http://soscw.com/index.php/essay/60203.html
评论
亲，登录后才可以留言！