这里下划线显示使用的是伪类，用hover属性触发伪类，使其显示下划线 代码如下： hover触发伪类： 完整代码如下： 如果遇到下拉菜单无法显示的问题，请首先检查外层div是否设置 ...

在做页面的时候发现页面导航栏有一个很棒的效果。具体的效果就是，当鼠标移到一个导航栏时，导航栏下方会缓慢出现一条线。 当用ui内联的方式实现普通的导航后，在html中的li添加一个class用来控制下划线的移动。 html部分： <div class="top"> ...

一、思路： 　　将伪元素:before和:after定位到元素底部中间，设置宽度从0变成100%达到目的。 二、实现： 　　1、首先定义一个块状元素（行内元素没有宽高）并修改样式为一个背景色为浅灰色的矩形，设置相对定位。 html代码 <div id="underline ...

...

先来看一下效果： 1、基本效果就是这样的 ，鼠标悬停，下划线划入。鼠标离开，下划线划出 2、下划线的划入是有方向的，从左侧划入悬停，下划线由左向右伸长。从右侧划入，下划线由又往左伸长 实现思路 1、导航是由ul+li组成的，在这里显然li 的宽度是不固定 ...

就像上图这样的动画效果 在导航栏里的时候，下划线跟随鼠标移动，鼠标移出导航栏时，下划线回到初始位置，同时要适应导航的宽度 为了适应导航的宽度，就不能给导航元素设置 margin，然后将导航元素的 clientWidth 设置给下划线 然后需要让下划线独立于导航之外，从而保证它的无缝 ...

先上张图，如何使用纯 CSS 制作如下效果？ 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 ...

先上张图，如何使用纯 CSS 制作如下效果？ 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是 ...