实现鼠标hover动画效果自己理解的两种方法——练习笔记

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

练习前端技术学院的任务，需要实现“导航栏中的链接，随着鼠标悬浮的位置，相应的链接下出现红色线段”的效果（如图1），我的理解有简易与稍显复杂一些的方法：

首先想到的就是直接利用伪元素，改变其底边框状态即可。对应的代码及效果如下:

css为：

ul li{
width:120px;
float:left;
}
ul{
list-style-type:none;
}
div{float:right;/*实现整体的右对齐布局}
a:hover{
color:red;
border-bottom:3px solid red;/*实现鼠标悬浮时对应链接高亮红色且有红色底边框效果*/
}

此方法就没有了平滑的动作（动画效果），其效果如图：

另一方法是用CSS3属性transition（过渡）实现，思路是利用该属性指定鼠标动作时变化的具体属性以及时间来控制其变化，用一个空的<li>放置变化的红色底线，具体代码如下：

<html>
<head></head>
<body>
<div class="navigation"> 
<ul>
<li><a href="#" class="Link-tit">首页</a></li>
<li><a href="#" class="Link-tit">最新活动</a></li>
<li><a href="#" class="Link-tit">项目介绍</a></li>
<li><a href="#" class="Link-tit">爱心社区</a></li>
<li><a href="#" class="Link-tit">关于我们</a></li>
<li><a href="#" class="Link-tit">登录</a></li>
<li class="move"></li> 
</ul>
</div>
</body>
</html>

CSS代码如下：

.head a{text-decoration:none;/*去除a自带的下划线*/}
ul{list-style-type:none;position:relative;}
.Link-tit:hover{color:red;}/*伪元素实现当鼠标停在链接上高亮显示*/
ul li{width:110px;float:left;line-height:20px;}
.move{border-bottom:3px solid red;position:absolute;left:0px;top:30px;
transition:left .2s ease-in-out 0s; /*transition中的left值为.move类事件触发时随鼠标变化的属性*/
-webkit-transition:left .2s ease-in-out 0s; /*chrome/safari浏览器*/
-moz-transition:left .2s ease-in-out 0s; /*firefox浏览器*/
-o-transition:left .2s ease-in-out 0s;} /*opera浏览器*/
li:nth-child(1):hover~.move{left:0px;}
li:nth-child(2):hover~.move{left:110px;}
li:nth-child(3):hover~.move{left:220px;}
li:nth-child(4):hover~.move{left:330px;}
li:nth-child(5):hover~.move{left:440px;}
li:nth-child(6):hover~.move{left:550px;}

其中，:nth-child(n)为子代选择器，此处表示各个链接，prev~slibings表示同辈元素，改变.move的left值，即可改变已经脱离文档流的下划线的位置，从而达到效果（见图一）。

transition：property(要进行过渡的属性) duration（过渡时间） timing-function（过渡变化曲线） delay(过渡开始时间)