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入门教程(3) js面向对象
Jan 31 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
简单的React SSR服务器渲染实现
Dec 11 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
第十三节--对象串行化
2006/11/16 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
smarty中常用方法实例总结
2015/08/07 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
php实现数据库的增删改查
2017/02/26 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
js操作select控件的几种方法
2010/06/02 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
python实现计算倒数的方法
2015/07/11 Python
python开发中range()函数用法实例分析
2015/11/12 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
意向书范本
2014/07/29 职场文书
春节超市活动方案
2014/08/14 职场文书
护士医德医风自我评价
2014/09/15 职场文书
授权收款委托书
2014/09/23 职场文书
个人作风建设心得体会
2014/10/22 职场文书
倡议书的格式写法
2015/04/28 职场文书