怎么实现JavaScript中的鼠标悬停

怎么实现JavaScript中的鼠标悬停?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、小程序设计、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了叶城免费建站欢迎大家使用!

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

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

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

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

什么是onmouseleave?

除了onmouseover之外,还有onmouseleave。

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

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




	
	


     

在上面的代码中,我们首先使用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中的鼠标悬停
转载来源:http://hbruida.cn/article/ppssos.html