JavaScript鼠标悬停事件用法解析


Posted in Javascript onMay 15, 2020

鼠标悬停事件是当鼠标的光标与其名称表示的元素重叠时触发的事件,本篇文章我们就来详细介绍一下JavaScript中鼠标悬停事件的用法。

我们先来看一下什么是onmouseover?

鼠标悬停的活动是“事件”,而onmouseover是事件处理程序。

事件处理程序是指定事件发生时要执行的进程所必需的。

所以onmouseover是一个事件处理程序,负责当鼠标的光标悬停在某个元素上时完成的处理。

什么是onmouseleave?

除了onmouseover之外,还有onmouseleave。

顾名思义,它处理当鼠标光标离开某个元素时触发的事件。

在下面的示例中将使用这两个属性,我们来看鼠标悬停事件的使用代码

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
</head>
<body>
 <div id="div1" style="width: 150px; height: 150px; padding: 10px; border: 1px solid #000000" onmouseover="over(this)" onmouseleave="leave(this)"></div>
</body>
<script>
 function over(x) {
 x.style.backgroundColor = "blue";
 }
  
 function leave(x) {
 x.style.backgroundColor = "red";
 }
</script>
</html>

在上面的代码中,我们首先使用div标签创建了一个简单的正方形。

方块的背景颜色指定为浅粉色。

JavaScript鼠标悬停事件用法解析

然后,我们使用HTML事件属性注册事件处理程序。

如代码所示,onmouseover属性和onmouseleave属性已添加到div标记的代码中。

onmouseover属性指定了当鼠标光标在方块上时激活的over函数。

onmouseover="over(this)"

在over函数的参数中,这表明div元素本身是over函数的参数。

over函数访问div元素的style.backgroundColor属性,并将方块的背景颜色设置为蓝色。

JavaScript鼠标悬停事件用法解析

为onmouseleave属性指定leave函数。

与over函数一样,leave函数也可以访问div元素的style.backgroundColor属性,并将方形背景颜色设置为红色。

JavaScript鼠标悬停事件用法解析

通过这样做,原来粉红色的正方形在将光标放在正方形时变成蓝色,在从正方形移开时变成红色。

以上就是JavaScript中的鼠标悬停事件的用法详解的详细内容,更多请关注我!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 自动填写表单的实现方法
Apr 09 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 #Javascript
Vue如何基于es6导入外部js文件
May 15 #Javascript
JavaScript onclick事件使用方法详解
May 15 #Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 #Javascript
用Angular实现一个扫雷的游戏示例
May 15 #Javascript
Node.js API详解之 dns模块用法实例分析
May 15 #Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 #Javascript
You might like
隐藏你的.php文件的实现方法
2007/03/19 PHP
php5 mysql分页实例代码
2008/04/10 PHP
ThinkPHP之getField详解
2014/06/20 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
JavaScript 图像动画的小demo
2012/05/23 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
Python2和Python3中print的用法示例总结
2017/10/25 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python初学者常见错误详解
2019/07/02 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
学校运动会开幕演讲稿
2014/01/04 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
司机职责范本
2014/03/08 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
文明村镇申报材料
2014/05/06 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
入团介绍人意见范文
2015/06/04 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
Python中文纠错的简单实现
2021/07/07 Python