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

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

 <html>

  <head></head>

 <body>

          <div>

                  <ul>

                        <li><a href="#" class="Link-tit"><i>首页</i></a></li>

                    <li><a href="#" class="Link-tit"><i>最新活动</i></a></li>

                    <li><a href="#" class="Link-tit"><i>项目介绍</i></a></li>

                    <li><a href="#" class="Link-tit"><i>爱心社区</i></a></li>

                    <li><a href="#" class="Link-tit"><i>关于我们</i></a></li>

                    <li><a href="#" class="Link-tit"><i>登录</i></a></li>

                  </ul>

          </div>

  </body>

 </html>

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"><i>首页</i></a></li>

                   <li><a href="#" class="Link-tit"><i>最新活动</i></a></li>

                   <li><a href="#" class="Link-tit"><i>项目介绍</i></a></li>

                   <li><a href="#" class="Link-tit"><i>爱心社区</i></a></li>

                   <li><a href="#" class="Link-tit"><i>关于我们</i></a></li>

                   <li><a href="#" class="Link-tit"><i>登录</i></a></li>

                   <li class="move"></li>                  <!--利用一个空的<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(过渡开始时间)

实现鼠标hover动画效果自己理解的两种方法——练习笔记的更多相关文章

  1. /*去hover动画效果*/

    <!DOCTYPE html> /*去hover动画效果*/ <html lang="en"> <head> <meta charset= ...

  2. Activity透明/半透明效果的设置transparent(两种实现方法)

    两种方法实现Activity透明/半透明效果的设置,代码思路很有调理,感兴趣的朋友可以参考下,希望本文可以帮助到你   方法一:res/values文件夹下建立styles.xml: 复制代码代码如下 ...

  3. 两种方法使用js读写cookie实现一个底部广告浮层效果

    下面一个案例实现了js实现一个页面浮层并且使用两种方法使用js读写cookie:来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方 ...

  4. 利用 :before :after伪类实现鼠标悬浮动画效果

    1.最近在逛网站的时候,想找一下喜欢的鼠标悬浮效果,避免广告的嫌疑,直接放图了: 2.在实现的时候,如果在直接使用鼠标hover ,transform,进行过渡,不能达到想要的效果,因为同时只能触发一 ...

  5. css3 鼠标悬浮动画效果

    CSS3案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  6. JQuery简单动画效果的发生顺序和animate方法

    (1)在同一组元素上的效果 当在一个.animate()方法中以多个属性的方式应用时,是同时发生的. 当以方法连缀的形式应用时,是按顺序发生的(排队效果)---除非queue选项值为false. (2 ...

  7. 解决transition动画与display冲突的几种方法

    如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐 ...

  8. android动画(3)layout动画,layoutChanged动画及算定义它,ListViewActivity的Layout动画(代码和xm配置两种实现l)

    1.layout切换动画 代码: 本示例是fragment切换.在它的oncreateView中 public class LayoutAnimationFrgmt extends Fragment ...

  9. jQuery 两种方法实现IE10以下浏览器的placeholder效果

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 测试的浏览器:IE8,IETester下的IE6-IE9** Author:博客园小dee */ placeholder是H ...

随机推荐

  1. sql server 错误号大全

    0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 拒绝访问. 6 句柄无效. 7 存储控制块被损坏. 8 存储空间不足,无法处理此 ...

  2. python 模块：xlrd && xlwt

    主要来自:http://www.jb51.net/article/60510.htm python读excel--xlrd 这个过程有几个比较麻烦的问题,比如读取日期.读合并单元格内容.下面先看看基本 ...

  3. Struts2思维导图

    自己感觉自己的知识不是很扎实,所以昨天留时间复习知识,昨天边复习边画了一个思维导图.不知道自己画的对不对,还没有画完.有错的地方大家请和我说.希望自己能更加牢固的记住这些知识. 不说废话,开图.图有点 ...

  4. 左边label随着右边textarea高度自适应

    左边label随着右边自适应 近期项目中,有表单需求 默认展示两列,当内容多的时候,可以展示一列 左边列 <div> <label>备注</label> <s ...

  5. （译）ABP之Abp Session

    原文地址:https://aspnetboilerplate.com/Pages/Documents/Abp-Session 介绍 ABP提供IAbpSession接口获取当前用户和租户信息,而不是使 ...

  6. （7拾遗）从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练

    从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练 1综述http://www.cnblogs.com/jsxyhelu/p/7907241.html2环境架设http://www.cn ...

  7. SSM框架实现分页

    SSM框架实现分页 1,.首先创建一个分页的工具类 package cn.page.po; import java.io.Serializable; public class Page impleme ...

  8. 记录因webpack版本问题导致vue-cli快速搭建的项目运行时报错！

    今日突然在群里见到好几个小伙伴说在创建vue项目后不能跑,会报错. 刚开始还不信,花了几分钟时间自己试了下,还真报错了!如下图 小伙伴的报错,如下图!   百思不得其解,看了运行的日志也找不出原因.于 ...

  9. 前端请求参数MD5加密校验,参数串解密

    首先引入MD5加密库:=>https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js; 步骤:=>1.请求前对参数进行字典升序排序,排 ...

  10. HDU5135 dfs搜索 枚举种数

    Little Zu Chongzhi's Triangles Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 512000/512000 ...