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 ...
随机推荐
- 浅谈iptables与firewalld防火墙
iptables基于包过滤的防火墙工具 ,Linux 内核集成的 IP 信息包过滤系统,对流入和流出服务器的数据包进行精细管理 规则是存储在专用信息包过滤表中 防火墙按照规则做出判断 而netfilt ...
- Linux 下使用rtcwake实现定时休眠和唤醒设备
查看是否安装rtcwake whereis rtcwake rtcwake: /usr/sbin/rtcwake /usr/share/man/man8/rtcwake.8.gz 查看rtcwake帮 ...
- 小飞机可以解决git clone没有返回的问题吗？
[1]Linux如何使用小飞机? 以ss为例,先下载客户端: https://www.mediafire.com/folder/xag0zy318a5tt/Linux 下载客户端以后,右键把权限中&q ...
- 【Fastjson】Fastjson反序列化由浅入深
Fastjson真-简-介 fastjson是由alibaba开发并维护的一个json工具,以其特有的算法,号称最快的json库 fastjson的使用 首先先创一个简单的测试类User public ...
- css预处理器和css Modules是干嘛的?
CSS预处理器 1.css和js的区别 js是编程语言,它可以声明变量,编写逻辑.而css实际上只是个"表",表头是选择器,内容是里面的样式.它并不能写逻辑啥的.也就是说,对于cs ...
- vue双向绑定和深浅拷贝
现象描述: vue 在使用的时候,当table绑定了某个data的时候.假如某个el-table-column下面的有个方法传参(data.row),然后在方法中用一个obj=data.row.(这里 ...
- CF1292B Aroma's Search 题解
Content 给定一个坐标系,已知第一个点的坐标为 \((x_0,y_0)\),第 \(i(i>0)\) 个点的坐标满足这样的两个递推式:\(x_i=a_xx_{i-1}+b_x,y_i=a_ ...
- Stun协议实现
在现实Internet网络环境中,大多数计算机主机都位于防火墙或NAT之后,只有少部分主机能够直接接入Internet.很多时候,我们希望网络中的两台主机能够直接进行通信(即所谓的P2P通信),而不需 ...
- 通过css实现表格的斜线
效果图 实现思路 编辑一个svg文件,可以自定义线条颜色和粗细. 将svg文件转为base64格式,作为背景图属性设置. svg转base64的网址:https://www.sojson.com/im ...
- java源码——两种格式日期的转换
这里要实现1981.07.30 格式和July 30.1981格式的日期的转换. 在输入时进行日期格式的识别,并且对字符串进行操作并且输出. 难点在于字符串格式的识别和月份的转换,我用了正则表达式匹配 ...