练习前端技术学院的任务，需要实现“导航栏中的链接，随着鼠标悬浮的位置，相应的链接下出现红色线段”的效果（如图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. Head First设计模式之享元模式（蝇量模式）

    一.定义 享元模式(Flyweight Pattern)主要用于减少创建对象的数量,以减少内存占用和提高性能.这种类型的设计模式属于结构型模式,它提供了减少对象数量从而改善应用所需的对象结构的方式. ...

  2. Validation of viewstate MAC failed 解决办法

    大部分人都说是在页里或web.config里加EnableEventValidation="false" EnableViewStateMac="false" ...

  3. 关于 jar 包数据更新的问题

    参考: 人乐草心的博文 如果要更新一个 jar 包内文件的一些信息,又不想重新编译,发包,可以如下操作. Extract JAR file unzip 拆包方式 unzip xxx.jar [ -d ...

  4. 关于 python 新式类和旧式类继承顺序的验证

    参考:http://www.cnblogs.com/blackmatrix/p/5630515.html 官方:https://docs.python.org/2/tutorial/classes.h ...

  5. 为什么很多第三方接口，都改成了基于http，直接传递json数据的方式来代替webservice?

    这实际上是三个问题,从WebService到今天流行的RESTful API(JSON) over HTTP,经历了数次变革 1 WebService有很多协议,为什么HTTP比较流行? WebSer ...

  6. angular4.0路由传递参数、获取参数最nice的写法

    研究ng4的官网,终于找到了我想要的方法.我想要的结果是用'&'拼接参数传送,这样阅读上是最好的.否则很多'/'的拼接,容易混淆参数和组件名称.一般我们页面跳转传递参数都是这样的格式:http ...

  7. select超链接跳转A

    客户端页面 实现 下拉菜单 跳转链接 如图 遂使用 select option来展现.开始想到添加 a标签,结果,不行.渲染不出来 搜索查询得知 如下方法实现 ================== & ...

  8. Unity3d 复制文字到剪切板及存储图像到相册

    游戏中里开发分享功能时用到两个小功能:1.复制一个链接到剪切板供在其他应用粘贴分享使用,2.保存一张二维码图像到相册供发送给其他应用用于分享.但是在unity中无法完成,需要分别开发相应的插件. An ...

  9. 【Dijkstra堆优化】洛谷P2243电路维修

    题目背景 Elf 是来自Gliese 星球的少女,由于偶然的原因漂流到了地球上.在她无依无靠的时候,善良的运输队员Mark 和James 收留了她.Elf 很感谢Mark和James,可是一直也没能给 ...

  10. Hadoop-MyEclipse安装配置

    配置环境:Hadoop-1.2.1,MyEclipse,Centos6.5 网站上有很多关于Hadoop-eclipse的安装配置信息,但很少有讲到关于怎么在MyEclipse上配置Hadoop的相关 ...