<!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. 【Java 8】Predicate详解

    一.java.util.function.Predicate 这里类是java自带主要广泛用在支持lambda表达式的API中. 1.接口源码 @FunctionalInterface public ...

  2. 【C++】结构体/结构体数组/结构体指针/结构体嵌套/函数参数/const

    一.结构体声明 struct Student { //成员列表 string name; int age; int score; }; //s3;定义时直接声明 int main() { struct ...

  3. 02 - Vue3 UI Framework - 顶部边栏

    顶部边栏比较简单,而且首页和文档页都需要,所以我们先从顶部边栏做起 前文回顾点击 这里 返回阅读列表点击 这里 初始化 首先,在 components 文件夹下,创建一个 vue 组件,命名为 Top ...

  4. java多线程3：synchronized

    线程安全 多个线程共同访问一个对象的实例变量,那么就可能出现线程不安全的问题. 先看一段代码示例,定义一个对象 MyDomain1 public class MyDomain1 { private i ...

  5. SpringCloud技术涵盖简介

    SpringCloud是微服务架构的集大成者,云计算最佳业务实践. 我们平常使用的Spring和他们的关系,对Spring,springboot , SpringCloud 的 概念区分,上图: Sp ...

  6. shell脚本 awk实现查看ip连接数

    一.简介 处理文本,是awk的强项了. 无论性能已经速度都是让人惊叹! 二.使用 适用:centos6+ 语言:英文 注意:无 awk 'BEGIN{ while("netstat -an& ...

  7. 前端浅谈---协议相关(TCP连接)

    TCP连接 http的描述里面,我弱化了交互过程的描述,因为它相对复杂.所以我在此单独描述.客户端和服务端传递数据时过程相对谨慎和复杂,主要是开始和结束的过程.而这整个过程就是TCP连接.连接流程大体 ...

  8. bjdctf_2020_babystack2

    此题考整型的有符号无符号的东西... 下载文件还是,先检查一下保护. 64位程序,只开启了堆栈不可执行,看一下ida的伪代码. 大概流程就是先让你输入一个数,这个数就是后面read的可以输入的长度,要 ...

  9. 解决Vulnhub靶机分配不到IP问题

    没法找到他的 ip,可能是网卡配置问题 (之前打开 .ova 文件默认联网方式是桥接,改成NAT) 在开机选择的时候,摁 e 编辑一下 把 ro 改成 rw single init=/bin/bash ...

  10. 一台电脑如何安装多个版本的JDK及其说明

    一.安装多个版本的JDK及其说明 1.准备多个版本的JDK 需要请点击下载 2.安装过程,除了根据需要更改安装路径,其他"傻瓜式"安装("下一步"),各版本都是 ...