js 鼠标经过和经过离开 导航实战案例
<!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 鼠标经过和经过离开 导航实战案例的更多相关文章
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 【干货分享】Node.js 中文学习资料和教程导航
这篇文章来自 Github 上的一位开发者收集整理的 Node.js 中文学习资料和教程导航.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念,它的目标是帮助程 ...
- Node.js 中文学习资料和教程导航
这篇文章来自 Github 上的一位开发者收集整理的 Node.js 中文学习资料和教程导航.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念,它的目标是帮助程 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- js 鼠标效果
一. 鼠标悬停效果和离开效果 鼠标效果和v-if 配合使用效果很好 <a class="all btn" href="#" v-on:mouseover= ...
- js 鼠标和键盘事件
js 鼠标和键盘事件 鼠标事件 聚焦事件 离焦事件 鼠标单击和双击 鼠标的其他事件 鼠标事件对象 键盘事件 鼠标事件 聚焦事件 <input type="text" id=& ...
- JS鼠标事件大全 推荐收藏
一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- js鼠标事件大全
一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...
随机推荐
- 【Java 基础】java 创建对象时重写方法
TransactionLock mockLock = new TransactionLock() { public boolean lock(String id) { return true; } p ...
- gogs报错解决合集
目录 一.在组织中添加成员,一直显示普通用户 一.在组织中添加成员,一直显示普通用户 组织是公司,团队是公司中的不同队伍.例如A团队设置为加入就有管理员权限,那加入就有管理员. 但在组织成员那一栏中加 ...
- 配置yum代理
一.说明 很多内网环境无法使用yum 二.配置 1.安装nginx 2.配置 server { listen 808; #禁用multipart range功能 max_ranges 1; serve ...
- 什么是Docker？
容器技术的起源 假设你们公司正在秘密研发下一个"今日头条"APP,我们姑且称为明日头条,程序员自己从头到尾搭建了一套环境开始写代码,写完代码后程序员要把代码交给测试同学测试,这时测 ...
- 联盛德 HLK-W806 (十): 在 CDK IDE开发环境中使用WM-SDK-W806
目录 联盛德 HLK-W806 (一): Ubuntu20.04下的开发环境配置, 编译和烧录说明 联盛德 HLK-W806 (二): Win10下的开发环境配置, 编译和烧录说明 联盛德 HLK-W ...
- 日历优先级（Project）
<Project2016 企业项目管理实践>张会斌 董方好 编著 好了,这下我们一共有三个日历了:"项目日历"(默认的日历)."任务日历"(与任务关 ...
- uwsgi nginx与django之间的关系以及各自的作用
首先要明确几个概念及其作用(注意大小写的区别): WSGI uWSGI uwsgi Nginx WSGI 是一种协议,不是任何包不是任何服务器,就和 TCP 协议一样.它定义了 Web 服务器和 We ...
- CF336A Vasily the Bear and Triangle 题解
Content 一个矩形的顶点为 \((0,0)\),其对顶点为 \((x,y)\),现过 \((x,y)\) 作直线,分别交 \(x\) 轴和 \(y\) 轴于 \(A,B\) 两点,使得 \(\t ...
- win10中docker使用docker-compose启动报错：pywintypes.error: (2, 'CreateFile', '系统找不到指定的文件。')
Traceback (most recent call last): File "docker\api\client.py", line 214, in _retrieve_ser ...
- vc mfc listctrl使用虚拟列表 虚拟列表用法
note 虚拟列表可有效加载大量数据 需要处理listctrl的 LVN_GETDISPINFO 消息 使用虚拟列表 不能 使用 insert的方法插入数据,而是告诉listctrl 当前要显示多少行 ...