<!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. JPA和事务管理

    JPA和事务管理 很重要的一点是JPA本身并不提供任何类型的声明式事务管理.如果在依赖注入容器之外使用JPA,事务处理必须由开发人员编程实现. 123456789101112UserTransacti ...

  2. shell脚本实现openss自建CA和证书申请

    #!/bin/bash # #******************************************************************** #Author: Ma Xue ...

  3. 【Linux】【Shell】【text】文本处理工具

    文本查看及处理工具:wc, cut, sort, uniq, diff, patch wc:word count wc [OPTION]... [FILE]... -l: lines -w:words ...

  4. 【spring AOP】AspectJProxyFactory

    AspectJProxyFactory,可能大家对这个比较陌生,但是@Aspect这个注解大家应该很熟悉吧,通过这个注解在spring环境中实现aop特别的方便. 而AspectJProxyFacto ...

  5. 【Java基础】HashMap原理详解

    哈希表(hash table) 也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技术(比如memcached)的核心其实就是在内存中维护一张大的哈希表,本文会对java集合框架中Has ...

  6. 全面解析 | 钥匙环服务的应用场景&商业价值

    在互联互通的场景驱动下,同一开发者旗下常常拥有多款应用或者多个应用形态,用户在同一设备的不同应用或端口登录时,即便使用同一帐号,仍需要重复输入密码进行验证,操作复杂,直接影响到用户的使用体验,而华为钥 ...

  7. 6、Redis五大数据类型---列表(List)

    一.列表(List)简介 单键多值:Redis 列表是简单的字符串列表,按照插入顺序排序.你可以添加一个元素到列表的头部(左边)或者尾部(右边). 它的底层实际是个双向链表,对两端的操作性能很高,通过 ...

  8. OAuth2.0实战：认证、资源服务异常自定义！

    大家好,我是不才陈某~ 这是<Spring Security 进阶>的第4篇文章,往期文章如下: 实战!Spring Boot Security+JWT前后端分离架构登录认证! 妹子始终没 ...

  9. 【dva】dva的基本用法

    services 该文件夹用于存储services,里面的内容为接口调用函数,记得将数据返回.(request是我自己封装函数,也可以用axios原生的函数) const finishTask = { ...

  10. [WPF] 用 OpacityMask 模仿 UWP 的 Text Shimmer 动画

    1. UWP 的 Text Shimmer 动画 在 UWP 的 Windows Composition Samples 中有一个 Text Shimmer 动画,它用于展示如何使用 Composit ...