<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        a {

            float: left;

            width: 80px;

            height: 50px;

            background-color: orangered;

            margin-left: 5px;

            text-decoration: none;

            line-height: 50px;

            text-align: center;

            color: #fff;

        }

    </style>

</head>

<body>

    <a href="javascript:;">导航一</a>

    <a href="javascript:;">导航二</a>

    <a href="javascript:;">导航三</a>

    <script>

        var a = document.querySelectorAll('a')

        //用js 代替了css 中hover 功能

        for (var i=0;i <a.length;i++){

            //写法一：

            a[i].addEventListener('mouseover',function(){

                this.style.backgroundColor='orange';

                this.addEventListener('mouseout',function(){ //此时this 就是div

                this.style.backgroundColor='orangered';

            })

            })

           //写法二：

           a[i].addEventListener('mouseover',function(){

                this.style.backgroundColor='orange';

            })

            a[i].addEventListener('mouseout',function(){

                this.style.backgroundColor='orangered';

            })

        }

    </script>

</body>

</html>

js 鼠标经过和经过离开 导航实战案例的更多相关文章

  1. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  2. 【干货分享】Node.js 中文学习资料和教程导航

    这篇文章来自 Github 上的一位开发者收集整理的 Node.js 中文学习资料和教程导航.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念,它的目标是帮助程 ...

  3. Node.js 中文学习资料和教程导航

    这篇文章来自 Github 上的一位开发者收集整理的 Node.js 中文学习资料和教程导航.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念,它的目标是帮助程 ...

  4. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  5. js 鼠标效果

    一. 鼠标悬停效果和离开效果 鼠标效果和v-if 配合使用效果很好 <a class="all btn" href="#" v-on:mouseover= ...

  6. js 鼠标和键盘事件

    js 鼠标和键盘事件 鼠标事件 聚焦事件 离焦事件 鼠标单击和双击 鼠标的其他事件 鼠标事件对象 键盘事件 鼠标事件 聚焦事件 <input type="text" id=& ...

  7. JS鼠标事件大全 推荐收藏

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...

  8. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  9. js鼠标事件大全

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...

随机推荐

  1. UIImageView总结

    UIImageView UIKit框架提供了非常多的UI控件,但并不是每一个都很常用,有些控件可能1年内都用不上,有些控件天天用,比如UIButton.UILabel.UIImageView.UITa ...

  2. vue-cli2嵌入html

    1.使用iframe <!-- 相对路径/绝对路径 --> <iframe src="../../../static/zsw.html"></ifra ...

  3. Linux 网卡配置文件，命令详细设置

    1.配置文件/etc/hosts(本地主机ip地址映射,可以有多个别名)./etc/services(端口号与标准服务之间的对应关系)./etc/sysconfig/network(设置主机名,网关, ...

  4. Classs类

    Classs类如何获得 获得Class对象 方式一: 通过Object类中的getClass()方法 方式二: 通过 类名.class 获取到字节码文件对象( 方式三: 通过Class类中的方法(将类 ...

  5. 【Linux】【Basis】Grub

    GRUB(Boot Loader):   1. grub: GRand Unified Bootloader grub 0.x: grub legacy grub 1.x: grub2   2. gr ...

  6. Springboot整合MongoDB（Eclipse版本）

    IDEA版本其实也差不多的,大同小异 简单Demo地址: https://blog.csdn.net/shirukai/article/details/82152243 Springboot项目整合M ...

  7. Java oop 笔记

    摘要网址:http://note.youdao.com/noteshare?id=bbdc0b970721e40d327db983a2f96371

  8. tableau创建点位地图

    一.双击省/自治区字段 二.双击销售额字段,标记类型改为圆 三.省/自治区字段设置标签显示,圆的大小和颜色细节调整,最终结果如下图所示

  9. [BUUCTF]PWN——babyheap_0ctf_2017

    [BUUCTF]PWN--babyheap_0ctf_2017 附件 步骤: 例行检查,64位,保护全开 试运行一下程序,看到这个布局菜单,知道了这是一道堆的题目,第一次接触堆的小伙伴可以去看一下这个 ...

  10. CF1490D Permutation Transformation 题解

    Content 给定一个排列 \(a\),按照以下方法构造一棵树: 选择当前排列中的最大数作为根的编号. 最大数左边的所有数按照上述方法建左子树,若没有数则该节点没有左儿子. 最大数右边的所有数按照上 ...