<!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. my37_MGR流控对数据库性能的影响以及MGR与主从的性能对比

    mysql> show variables like 'group_replication_flow_control_applier_threshold'; +----------------- ...

  2. 登录界面.jsp

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  3. MyBatis中关于大于，小于写法

    第一种写法(1): 原符号 < <= > >= & ' " 替换符号 < <= > >= & &apos; " ...

  4. Selenium和PhantomJS

    Selenium Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动操作,不同是Selenium 可以直接运行在浏览器上, ...

  5. Springboot集成velocity

    1.加入maven包 <parent> <groupId>org.springframework.boot</groupId> <artifactId> ...

  6. Markdown随时记录

    Markdown学习 推荐文本编译器 Typora 标题(支持六级) 一级标题:# + 空格 + 内容 二级标题:## + 空格 + 内容 三级标题:### + 空格 + 内容 . . . 字体 粗体 ...

  7. Moment.js使用笔记

    零.前情提要 上个月开发了数据平台,用的框架是vue + Ant Design of Vue,其中用了组件[range-picker]日期选择框,涉及到时间方法就去看了momentJS,以此记录~ 如 ...

  8. centos部署代码仓库gitlab

    目录 一.简介 二.程序部署 部署gitlab 汉化gitlab 三.设置管理员密码 网页方式 指令方式 一.简介 GitLab是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托 ...

  9. java多线程8：阻塞队列与Fork/Join框架

    队列(Queue),是一种数据结构.除了优先级队列和LIFO队列外,队列都是以FIFO(先进先出)的方式对各个元素进行排序的. BlockingQueue 而阻塞队列BlockingQueue除了继承 ...

  10. Sql Server、Oracle、MySQL 日期格式化函数处理

    目录 Sql Server Oracle MySql Sql Server CONVERT ( '取数长度' , '时间' , '类型') 查询对应时间: 2021-03-17T19:18:18.00 ...