目录

onmouseover 事件

❮ DOM 事件 ❮ 鼠标事件

示例

将鼠标指针移动到图片上时调用函数:

<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
亲自试一试 »

下面有更多示例。


描述

这个onmouseover事件发生时鼠标指针进入元素

这个onmouseover事件经常与onmouseout事件,当鼠标指针离开元素时发生。

这个onmouseover事件类似于 onmouseenter事件。不同之处在于onmouseenter事件不会冒泡(不会向上传播文档层次结构)。请参阅本页底部的 "More Examples" 以更好地了解差异。

鼠标事件

Event Occurs When
onclick The user clicks on an element
oncontextmenu The user right-clicks on an element
ondblclick The user double-clicks on an element
onmousedown A mouse button is pressed over an element
onmouseenter The pointer is moved onto an element
onmouseleave The pointer is moved out of an element
onmousemove The pointer is moving over an element
onmouseout The mouse pointer moves out of an element
onmouseover The mouse pointer is moved over an element
onmouseup The mouse button is released over an element

也可以看看:

鼠标事件对象

教程:

JavaScript 事件


语法

在 HTML 中:

< element onmouseover=" myScript">
亲自试一试 »

在 JavaScript 中:

object.onmouseover = function(){ myScript};
亲自试一试 »

在 JavaScript 中,使用 addEventListener() 方法:

object.addEventListener("mouseover", myScript);
亲自试一试 »


技术细节

气泡: 是的
可取消: 是的
事件类型: 鼠标事件
HTML 标签: 所有 HTML 元素,除了:<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 和 <title>
DOM 版本: 2 级活动

更多示例

示例

此示例演示了 onmousemove、onmouseenter 和 mouseover 事件之间的区别:

<div onmousemove="myMoveFunction()">
  <p id="demo1">I will demonstrate onmousemove!</p>
</div>

<div onmouseenter="myEnterFunction()">
  <p id="demo2">I will demonstrate onmouseenter!</p>
</div>

<div onmouseover="myOverFunction()">
  <p id="demo3">I will demonstrate onmouseover!</p>
</div>
亲自试一试 »

浏览器支持

onmouseover是 DOM Level 2 (2001) 功能。

所有浏览器都完全支持它:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11


❮ DOM 事件 ❮ 鼠标事件