如何使用JavaScript鼠标悬停事件

小编这次要给大家分享的是如何使用JavaScript鼠标悬停事件，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

创新互联建站2013年开创至今，先为罗田等服务建站，罗田等地企业，进行企业商务咨询服务。为罗田企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

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

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

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

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

什么是onmouseleave？

除了onmouseover之外，还有onmouseleave。

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

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

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

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

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

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

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

onmouseover="over(this)"

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

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

为onmouseleave属性指定leave函数。

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

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

看完这篇关于如何使用JavaScript鼠标悬停事件的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。