练习前端技术学院的任务，需要实现“导航栏中的链接，随着鼠标悬浮的位置，相应的链接下出现红色线段”的效果（如图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. python 模块：xlrd && xlwt

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

  2. Tomcat与SpringMVC结合分析(一)

    关键字: Bootsrap,Catalina,Server,Service,Engine,Host,Context,Wrapper,Valve,Pipeline,ContextConfig,Servl ...

  3. 多行文字水平垂直居中在div

    <BODY>   <div class="box">    <h3>1.单行文字居中</h3>    <!--设置行高来实现- ...

  4. python 豆瓣采集

    新手今天刚学python~~~ 有点凌乱~勉强看吧 只能算是给新手看看,见谅 简单版本的 豆瓣采集美图~~~~~~ 美女天天有 有木有~~~ python 3.4 sqlite3 BeautifulS ...

  5. VS2017编译SFML SDK配制环境详解

    SFML和Visual Studio 介绍 如果您在Visual Studio IDE(Visual C ++编译器)中使用SFML,本教程是第一个应该阅读的教程.它将解释如何配置您的SFML项目. ...

  6. 设计模式复习小结一(Strategy Pattern/Observer Pattern/Decorator Patter/Factory Pattern)

    目录: 前言 1. Stratrgy Pattern 2. Observer Pattern 3. Decorator Pattern 4. Factory Pattern 4.1 FactoryPa ...

  7. docker的相关使用

    1.docker ps 列出所有容器 2.docker images 查看docker镜像 3.docker run [OPTIONS] IMAGE [COMMAND] [ARG...] 运行容器 4 ...

  8. 一天就学会Android开发四大组件

    这个文章主要是讲Android开发的四大组件,本文主要分为 一.Activity详解二.Service详解三.Broadcast Receiver详解四.Content Provider详解外加一个重 ...

  9. Codeforces 915E Physical Education Lessons

    原题传送门 我承认,比赛的时候在C题上卡了好久(最后也不会),15min水掉D后(最后还FST了..),看到E时已经只剩15min了.尽管一眼看出是离散化+线段树的裸题,但是没有时间写,实在尴尬. 赛 ...

  10. （转）关于docker的15个小tip

    转自:https://www.cnblogs.com/elnino/p/3899136.html 1. 获取最近运行容器的id 这是我们经常会用到的一个操作,按照官方示例,你可以这样做(环境ubunt ...