JavaScript中的鼠标悬停事件的用法详解
Posted xsd1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript中的鼠标悬停事件的用法详解相关的知识，希望对你有一定的参考价值。
鼠标悬停事件是当鼠标的光标与其名称表示的元素重叠时触发的事件，本篇文章我们就来详细介绍一下javascript中鼠标悬停事件的用法。
打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）
我们先来看一下什么是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标签创建了一个简单的正方形。
方块的背景颜色指定为浅粉色。
然后，我们使用HTML事件属性注册事件处理程序。
如代码所示，onmouseover属性和onmouseleave属性已添加到div标记的代码中。
onmouseover属性指定了当鼠标光标在方块上时激活的over函数。
onmouseover="over(this)"在over函数的参数中，这表明div元素本身是over函数的参数。
over函数访问div元素的style.backgroundColor属性，并将方块的背景颜色设置为蓝色。
为onmouseleave属性指定leave函数。
与over函数一样，leave函数也可以访问div元素的style.backgroundColor属性，并将方形背景颜色设置为红色。
通过这样做，原来粉红色的正方形在将光标放在正方形时变成蓝色，在从正方形移开时变成红色。
以上就是JavaScript中的鼠标悬停事件的用法详解的详细内容，更多请关注我！！！
以上是关于JavaScript中的鼠标悬停事件的用法详解的主要内容，如果未能解决你的问题，请参考以下文章