原文：jquery实现导航栏切换、下划线移入移出
这里下划线显示使用的是伪类，用hover属性触发伪类，使其显示下划线 代码如下： hover触发伪类： 完整代码如下： 如果遇到下拉菜单无法显示的问题，请首先检查外层div是否设置了 我就是因为这个疑惑了很久，这里标注出来，希望大家不要想我一样踩这个纯属浪费时间的坑 我也很无奈啊 。 ...
2020-05-18 17:55 0 560 推荐指数：
相关推荐
就像上图这样的动画效果 在导航栏里的时候，下划线跟随鼠标移动，鼠标移出导航栏时，下划线回到初始位置，同时要适应导航的宽度 为了适应导航的宽度，就不能给导航元素设置 margin，然后将导航元素的 clientWidth 设置给下划线 然后需要让下划线独立于导航之外，从而保证它的无缝 ...
在做页面的时候发现页面导航栏有一个很棒的效果。具体的效果就是，当鼠标移到一个导航栏时，导航栏下方会缓慢出现一条线。 当用ui内联的方式实现普通的导航后，在html中的li添加一个class用来控制下划线的移动。 html部分： <div class="top"> ...
...
这几日学习html，一直在B站乱逛，发现网站的动效做的真好。然后翻到了这一页： 点此查看 上面的导航栏是一个下划线跟随的效果。由于有一个初始的选项（当前页面对应标签保持蓝色），鼠标划过时除了高亮项下面的下划线也要跟随。如果只实现前面这些效果可以用css完成，但是其实这里面的下划线是一个动画 ...
先来看一下效果： 1、基本效果就是这样的 ，鼠标悬停，下划线划入。鼠标离开，下划线划出 2、下划线的划入是有方向的，从左侧划入悬停，下划线由左向右伸长。从右侧划入，下划线由又往左伸长 实现思路 1、导航是由ul+li组成的，在这里显然li 的宽度是不固定 ...
xml code: ...