练习前端技术学院的任务，需要实现“导航栏中的链接，随着⿏标悬浮的位置，相应的链接下出现红⾊线段”的效果（如图1），我的理解有简易与稍显复杂⼀些的⽅法：
⾸先想到的就是直接利⽤伪元素，改变其底边框状态即可。对应的代码及效果如下:
1
2
3 4 14 15css为：
1 ul li{
2 width:120px; 3 float:left; 4 } 5 ul{
6 list-style-type:none; 7 }
8 div{float:right;/*实现整体的右对齐布局} 9 a:hover{
10 color:red;
11 border-bottom:3px solid red;/*实现⿏标悬浮时对应链接⾼亮红⾊且有红⾊底边框效果*/12 }
此⽅法就没有了平滑的动作（动画效果），其效果如图：
另⼀⽅法是⽤CSS3属性transition（过渡）实现，思路是利⽤该属性指定⿏标动作时变化的具体属性以及时间来控制其变化，⽤⼀个空的
CSS代码如下：
1 .head a{text-decoration:none;/*去除a⾃带的下划线*/} 2 ul{list-style-type:none;position:relative;}
3 .Link-tit:hover{color:red;}/*伪元素实现当⿏标停在链接上⾼亮显⽰*/ 4 ul li{width:110px;float:left;line-height:20px;}
5 .move{border-bottom:3px solid red;position:absolute;left:0px;top:30px;
6 transition:left .2s ease-in-out 0s; /*transition中的left值为.move类事件触发时随⿏标变化的属性*/ 7 -webkit-transition:left .2s ease-in-out 0s; /*chrome/safari浏览器*/ 8 -moz-transition:left .2s ease-in-out 0s; /*firefox浏览器*/ 9 -o-transition:left .2s ease-in-out 0s;} /*opera浏览器*/10 li:nth-child(1):hover~.move{left:0px;}11 li:nth-child(2):hover~.move{left:110px;}
12 li:nth-child(3):hover~.move{left:220px;}13 li:nth-child(4):hover~.move{left:330px;}14 li:nth-child(5):hover~.move{left:440px;}15 li:nth-child(6):hover~.move{left:550px;}
其中，:nth-child(n)为⼦代选择器，此处表⽰各个链接，prev~slibings表⽰同辈元素，改变.move的left值，即可改变已经脱离⽂档流的下划线的位置，从⽽达到效果（见图⼀）。
transition：property(要进⾏过渡的属性) duration（过渡时间） timing-function（过渡变化曲线） delay(过渡开始时间)
因篇幅问题不能全部显示，请点此查看更多更全内容