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 ...
随机推荐
- Linux:$?,$n,$#,$0
$? 获取执行上一个指令的返回值(0为成功,非零为失败) $n 获取当前执行的shell脚本的第n个参数值,n=1...9,当n=0的时表示脚本的文件名,如果n大于9,大括号括起来${10} $# 获 ...
- 【C/C++】算法入门：排序/算法笔记
(设排序从小到大) 冒泡排序 这个大家都会,从第一个开始往后俩俩交换,然后第二个,最后到最后一个,复杂度n^2 选择排序 思路和冒泡差不多,比如要得到从小到大的排序,就是从第一个开始,i取1~n,每次 ...
- C#内建接口：IEnumerable
这节讲一下接口IEnumerable. 01 什么是Enumerable 在一些返回集合数据的接口中,我们经常能看到IEnumerable接口的身影.那什么是Enumerable呢?首先它跟C#中的e ...
- Groovy获取Bean两种方式（奇淫技巧操作）
前言:请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 背景: 在Java代码中当我们需要一个Bean对象,通常会使用spring中@Autowired注解,用来自动装配对象. 在Groovy ...
- centos源码部署lua-5.3
目录 一.介绍 二.部署 三.测试 一.介绍 Luat语言是在1993年由巴西一个大学研究小组发明,其设计目标是作为嵌入式程序移植到其他应用程序,它是由C语言实现的,虽然简单小巧但是功能强大. 二.部 ...
- Apache Log4j 远程代码执行漏洞源码级分析
漏洞的前因后果 漏洞描述 漏洞评级 影响版本 安全建议 本地复现漏洞 本地打印 JVM 基础信息 本地获取服务器的打印信息 log4j 漏洞源码分析 扩展:JNDI 危害是什么? GitHub 项目 ...
- 一文详解 OpenGL ES 纹理颜色混合
在OpenGL中绘制的时候,有时候想使新画的颜色和已经有的颜色按照一定的方式进行混合.例如:想使物体拥有半透明的效果,或者绘制叠加光亮的效果,这时候就需要用到OpenGLES混合. 如上图所示,为石头 ...
- mit6.830-lab2-常见算子和 volcano 执行模型
一.实验概览 github : https://github.com/CreatorsStack/CreatorDB 这个实验需要完成的内容有: 实现过滤.连接运算符,这些类都是继承与OpIterat ...
- CF803B Distances to Zero 题解
Content 有一个长度为 \(n\) 的序列 \(a_1,a_2,a_3,...,a_n\),求每个数与它最近的 \(0\) 的距离(\(0\) 的距离为 \(0\)). 数据范围:\(1\leq ...
- CF31B Sysadmin Bob 题解
Content 给定一个字符串 \(s\),请将其分解为诸如 \(\texttt{xx@xx}\) 的子串,并将分解后的所有子串输出,或者说不存在这样的方案. 数据范围:\(1\leqslant|s| ...