<!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. maven依赖对zookeeper的版本冲突问题

    我用的是springcloudAlibaba+zookeeper zookeeper下载后 1,修改配置文件,conf目录下的zoo_sample.cfg修改为zoo.cfg. 2,打开zoo.cfg ...

  2. 05 - Vue3 UI Framework - Button 组件

    官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件 ...

  3. Nginx状态码和日志

    目录 一.Nginx状态返回码 二.Nginx日志统计 一.Nginx状态返回码 http返回状态码(Status-Code), 以3位数字组成 200 成功 301 永久重定向(redirect) ...

  4. 【划重点】Python matplotlib绘图建立画布和坐标系

    一.建立画布 import matplotlib.pyplot as plt import numpy as np x=np.arange(8) y=np.arange(8) print(x,y) # ...

  5. 减轻内存负担，在 pymysql 中使用 SSCursor 查询结果集较大的 SQL

    前言 默认情况下,使用 pymysql 查询数据使用的游标类是 Cursor,比如: import pymysql.cursors # 连接数据库 connection = pymysql.conne ...

  6. java 数据类型String 【正则表达式】匹配工具 Pattern和Matcher

    Pattern和Matcher的介绍: Pattern对象是正则表达式编译后在内存中的表示形式,因此正则表达式宇符串必须先被编译为Pattern对象,然后再用该Pattern对象创建对应的Matche ...

  7. flexpaper上传带中文名字的文档，在页面显示若出现404错误时，请在server.xml文件中进行编码utf-8

    flexpaper上传带中文名字的文档,在页面显示若出现404错误时,请在server.xml文件中进行编码utf-8

  8. Flutter学习(9)——Flutter插件实现(Flutter调用Android原生

    原文地址: Flutter学习(9)--Flutter插件实现(Flutter调用Android原生) | Stars-One的杂货小窝 最近需要给一个Flutter项目加个apk完整性检测,需要去拿 ...

  9. nim_duilib(20)之即刻(1)

    note 一个基于nim_duilib仿wechat的IM. 主界面 样式 美工差了. 布局 整体为水平布局,左边的深灰色区域(frame_left),右侧的light white区域(frame_r ...

  10. 【LeetCode】243. Shortest Word Distance 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典 日期 题目地址:https://leetcode ...