onmouseover是JavaScript中的鼠标事件之一，当鼠标指针移动到指定HTML元素时触发，可通过内联事件处理器、DOM属性或addEventListener方法绑定处理函数，用于实现工具提示、样式变更等交互效果 [2-3] [5] [7]。其语法为onmouseover=“SomeJavaScriptCode”，支持通过dispatchEvent方法模拟触发 [9]。该事件具有冒泡特性，会沿DOM树向上传播影响父元素 [4] [6] [8]。
与onmouseenter的区别在于后者仅在直接移入元素时触发且不冒泡 [4] [6]。为提高可访问性，建议与onfocus/onblur事件配合使用以适应键盘操作 [10]。在PrestaShop等框架中可用于实现按钮悬停特效 [7]
- 外文名
- onmouseover
- 介 绍
- 鼠标指针移动指定时触发事件发生
- 结 合
- JS实现一些CSS特效
语法
播报编辑
onmouseover="SomeJavaScriptCode"
标签
播报编辑
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
事件对象
播报编辑
link,layer
onmouseover与onmousemove的区别
时间上，onmousemove事件触发后再触发onmouseover事件；动作上，onmouseover只在刚进入区域时触发。onmousemove除了刚进入区域时触发外，在区域内移动鼠标也会触发。
参数
播报编辑
onmousemove事件的参数如下所示： [1]
参数 | 描述 |
|---|---|
SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript。 |
实例
播报编辑
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById('b1').src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById('b1').src ="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn"
onmouseover="mouseOver()" onmouseout="mouseOut()">
<img alt="Visit W3School!" src="/i/eg_mouse2.jpg" id="b1" />
</a>
</body>
</html>
