JavaScript中的鼠标悬停事件的用法详解

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

JavaScript中的鼠标悬停事件的用法详解

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

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

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

立即学习“Java免费学习笔记(深入)”;

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

什么是onmouseleave?

除了onmouseover之外,还有onmouseleave。

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

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

nbsp;html>     
function over(x) { x.style.backgroundColor = "blue"; } function leave(x) { x.style.backgroundColor = "red"; }

登录后复制

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

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

微信截图_20190107151829.png

然后,我们使用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中的鼠标悬停事件的用法详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2734729.html

(0)
上一篇 2025年3月8日 01:08:56
下一篇 2025年3月7日 01:07:02

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论