练习前端技术学院的任务，需要实现“导航栏中的链接，随着鼠标悬浮的位置，相应的链接下出现红色线段”的效果（如图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. Spring之Bean的基本概念

     转自http://blog.csdn.net/chenssy/article/details/8222744 Spring其实就是一个大型的工厂,而Spring容器中的Bean就是该工厂的产品.对于 ...

  2. MySQL ALTER TABLE: ALTER vs CHANGE vs MODIFY COLUMN

    ALTER COLUMN 语法: ALTER [COLUMN] col_name {SET DEFAULT literal | DROP DEFAULT} 作用: 设置或删除列的默认值.该操作会直接修 ...

  3. springMVC(7)---表单标签

    springMVC(7)---表单标签 form标签作用                                     简单来讲form表单有两大作用 1:第一就是往后端提交数据或者前端回显 ...

  4. Sql Server Configuration Manager 网络配置为空，没有实例

    新用户一天内不准提问...Sql Server Configuration Manager 网络配置为空,没有实例无法设置ip和端口进行连接..

  5. ionic serve 突然报错 node-sass

    正常打开项目,并开启浏览器测试模式: 执行命令: ionic serve:  结果报错: 解决方法: 你可以按照 里面的提示: 直接执行命令: npm rebuild node-sass 然后再重新执 ...

  6. ES6小点心第二弹——底部浮现弹窗

    小点心,顾名思义,开箱即食,拿来即用. 献上第二个小点心:SlidePopup. GitHub 在线演示 GitHub 上欢迎大家来找茬^_^ 前端朋友们,今天要介绍的这款小点心牛B了.相信是个前端都 ...

  7. 【三十】php之PDO抽象层

    1.PDO介绍(php data object) PHP 数据对象 (PDO) 扩展为PHP访问数据库定义了一个轻量级的一致接口. PDO 提供了一个数据访问抽象层,这意味着,不管使用哪种数据库,都可 ...

  8. POJ 1741 Tree(树的点分治，入门题)

    Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 21357   Accepted: 7006 Description ...

  9. 【Java学习笔记之七】java函数的语法规则总结

    函数的概述 发现不断进行加法运算,为了提高代码的复用性,就把该功能独立封装成一段独立的小程序,当下次需要执行加法运算的时候,就可以直接调用这个段小程序即可,那么这种封装形形式的具体表现形式则称作函数. ...

  10. HDU 1010 Tempter of the Bone【DFS经典题+奇偶剪枝详解】

    Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...