练习前端技术学院的任务，需要实现“导航栏中的链接，随着鼠标悬浮的位置，相应的链接下出现红色线段”的效果（如图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. 在Eclipse中查看JDK源码的方法

    遇到这个问题是因为想证明Vector中的get()方法是不是用synchronized关键字修饰的来保证线程安全的方法, 于是在Eclipse里面: Vector<Integer> vec ...

  2. Looping over the databases on a server

    SP_MSFOREACHDB 获得所有实例下数据库名称 EXEC sp_MSForEachDB 'PRINT "?"'   sp_MSforeachtable   USE MAST ...

  3. com.mchange.v2.async.ThreadPoolAsynchronousRunner$DeadlockDetector APPARENT DEADLOCK

    最近在IDEA中启动Tomcat经常会碰到这个错误,起初.一直没在意,现在碰到的次数多了,就去查看下这个问题,现描述如下: =2018-01-08 14:27:30,216 WARN [com.mch ...

  4. Emmet for Dreamweaver 整理分享

    我是一名技术不是很到位的前端,每次做项目总要写大量的HTML和CSS,耳边经常听到的是快.快点.再快点!我真想说快你妹!但是,我不得不承认的是:我只有两只手... 后来,在群里看到有人分享了一个连接大 ...

  5. vue-父子组件嵌套的示例

    组件注册: // 注册组件 Vue.component('my-component', { template: '<div>A custom component!</div>' ...

  6. android开发遇到的问题

    1.虚拟机运行出下面的错Failed to allocate memory: 8 Failed to allocate memory: 8This application has requested ...

  7. CentOS修改系统时间

    CentOS修改系统时间 操作: 1. date –s '1987-05-02 10:10:10' 2. clock –w //将日期写入CMOS 补充: 修改Linux时间一般涉及到3个命令: 1. ...

  8. python3之递归

    1.递归的特点 递归算法是一种直接或间接调用自身算法的过程,在计算机编程中,递归算法对解决一大类问题是十分,它往往使算法的描述简洁而且易于理解. 递归算法解决问题的特点: (1)递归就是在过程或函数里 ...

  9. python函数定义

    刚学用Python的时候,特别是看一些库的源码时,经常会看到func(*args, **kwargs)这样的函数定义,这个*和**让人有点费解.其实只要把函数参数定义搞清楚了,就不难理解了. 先说说函 ...

  10. AC自动机讲解

    今天花了半天肝下AC自动机,总算啃下一块硬骨头,熬夜把博客赶出来.. 正如许多博客所说,AC自动机看似很难很妙,而事实上不难,但的确很妙.笼统地说,AC自动机=Trie+KMP,但是仅仅知道这个并没有 ...