JavaScript鼠标悬停事件用法代码解析

本篇文章小编给大家分享一下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属性，并将方形背景颜色设置为红色。

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