Mouseover 函数在 javascript 中的用法

17 Mar 2025 | 6 分钟阅读

当鼠标光标移到 HTML 元素上时，会触发 onmouseover 事件并显示用户定义的函数。当鼠标光标选择用户元素、HTML 标签或所需数据时，此函数也会起作用。当用户将鼠标光标移出元素时，如果未使用 mouseout 函数，则会激活 onmouseover 事件。mouseover 函数与 mouseout 函数协同工作以禁用该函数。例如，可以使用 onmouseover 事件突出显示链接，当鼠标指针移开后，链接会恢复正常。

语法

以下语法以不同的格式与不同的事件一起使用 JavaScript。

语法 1：以下语法使用 HTML 标签和 JavaScript 函数。JavaScript 函数在 script 标签或不同的 script 页面中工作。

<html>
<body>
<p onmouseover = "handler_name()">
</p>
<script>
// defining the function of the handler name
function handler_name()
{
//user-defined function script
}
</script>
</body>
</html>

语法 2：以下语法仅使用 JavaScript 事件及其函数。我们可以使用 HTML 元素的该对象。

<script>
object.onmouseover = handler_name() {
//user-defined function script
};
</script>

语法 3：以下语法使用 addEventListener 事件和 JavaScript 函数。

<script>
object.addEventListener("mouseover", handler_name);
// user defined function script
function handler_name()
{
//user-defined function script
}
</script>

JavaScript Onmouseover 事件参数

onmouseover 事件接受一个参数。我们只能使用函数名，这是必需的。
处理程序/函数名：onmouseover 事件与处理程序名一起工作。处理程序/函数包含用户为 mouseover 事件定义的自定义操作。

JavaScript 的 Onmouseover 事件返回值

不返回值。Onmouseove 事件不显示任何输出数据。它会显示用户定义的网页及其函数验证。
我们可以使用用户定义的 HTML 函数样式和验证来确认事件函数。

支持的浏览器

鼠标事件函数支持许多浏览器。“mouseup”函数支持以下浏览器。

Chrome
边
火狐
Opera
Safari
IE

不支持的 HTML 元素

以下 HTML 元素不支持 mouseover 事件。其他用户定义的和用户交互的元素都受支持或可操作。

<head>
<html>
<br>
<style>
<title>
<script>
<head>
<meta>
<base>
<iframe>
<param>
<bdo>

示例

以下示例以不同方式和各种事件显示了一个函数。

示例 1：以下示例显示了 HTML 标签上的鼠标悬停函数和使用 JavaScript 的处理程序事件。我们可以更改网页的样式标签。

<!DOCTYPE html>
<html>
<head>
<title> Mouseover function in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: gree;
}
</style>
</head>
<body>
<h2> JavaScript Mouse over Method </h2>
<p id = "datas"> </p>
<div id = "demoDIV" onmouseover = "demoDIVFunction()">
The javascript mouse over event works to place a pointer or move the pointer on the particular tag. It is a mouse event to handle functionality with the pointer.
</div>
<script>
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Over Method activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "20px";
document.getElementById("demoDIV").style.color = "blue";
}
</script>
</body>
</html>

输出

图像显示了已激活鼠标悬停事件的输出页面。

示例 2

在示例中，mouseover 和 mouseout 事件使用 HTML 标签和 JavaScript 函数。我们可以使用 mouseover 函数更改随机背景和字体颜色。mouseout 事件会移除 mouseover 事件及其函数。

<!DOCTYPE html>
<html>
<head>
<title> Mouseover and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: blue;
}
</style>
</head>
<body>
<h2> Mouseover and mouseout events in JavaScript </h2>
<div id = "demoVal" onmouseover = "demoOverFunction()" onmouseout = "demoOutFunction()">
The javascript mouse over event works to place a pointer or move the pointer on the particular tag. It is a mouse event to handle functionality with the pointer.
</div>
<p id = "datas"> </p>
<script>
function demoOverFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseover function activates successfully!!!";
document.getElementById("demoVal").style.color = "red";
var color = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase();
document.getElementById("demoVal").style.backgroundColor = color;
}
function demoOutFunction() {
document.getElementById("datas").innerHTML = "";
document.getElementById("demoVal").style.color = "black";
var color = "";
document.getElementById("demoVal").style.backgroundColor = color;
}
</script>
</body>
</html>

输出

输出显示了网页上的 mouseover 事件功能。

示例 3

在示例中，mouseover 事件使用 addEventListener JavaScript 函数。我们可以使用 mouseover 函数更改随机验证和样式。

<!DOCTYPE html>
<html>
<head>
<title> Mouseover and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: blue;
}
</style>
</head>
<body id = "demoVal">
<h2> Mouseover evnet in JavaScript </h2>
<b> Mouseover evnet using addeventlistern in JavaScript </b>
<div>
The javascript mouse over event works to place a pointer or move the pointer on the particular tag. It is a mouse event to handle functionality with the pointer.
</div>
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("demoVal");
demoObj.onmouseover = demoOverFunction;
function demoOverFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseover function activates successfully!!!";
document.getElementById("demoVal").style.color = "white";
document.getElementById("demoVal").style.fontSize = "18px";
document.getElementById("demoVal").style.width = "440px";
document.getElementById("demoVal").style.backgroundColor = "black";
}
</script>
</body>
</html>

输出

输出显示了网页上的 mouseover 事件功能。

示例 4

在示例中，mouseover 事件使用 JavaScript 函数。我们可以使用 mouseover 函数更改随机背景和字体颜色。

<!DOCTYPE html>
<html>
<head>
<title> Mouseover and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: blue;
}
</style>
</head>
<body id = "demoVal">
<h2> Mouseover and mouseout evnets in JavaScript </h2>
<div>
The javascript mouse over event works to place a pointer or move the pointer on the particular tag. It is a mouse event to handle functionality with the pointer.
</div>
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("demoVal");
demoObj.addEventListener("mouseover", demoOverFunction);
function demoOverFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseover function activates successfully!!!";
document.getElementById("demoVal").style.color = "yellow";
document.getElementById("demoVal").style.fontSize = "18px";
document.getElementById("demoVal").style.backgroundColor = "navy";
}
</script>
</body>
</html>

输出

输出显示了网页上的 mouseover 事件功能。

示例 5

在给定的示例中，mouseover 事件在 HTML 页面的 HTML 标签上工作。它需要在页眉部分的标签上固定。此事件在用户定义的标签上工作。

<!DOCTYPE html>
<html id = "demoVal">
<head>
<title> Mouseover and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: blue;
}
</style>
</head>
<body>
<h2> Mouseover evnets in JavaScript </h2>
<div>
The javascript mouse over event works to place a pointer or move the pointer on the particular tag. It is a mouse event to handle functionality with the pointer.
</div>
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("demoVal");
demoObj.addEventListener("mouseover", demoOverFunction);
function demoOverFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseover function activates successfully!!!";
}
</script>
</body>
</html>

输出

输出显示了网页上的 mouseover 事件功能。

示例 6

在给定的示例中，mouseover 事件在 HTML 页面的 HTML 标签上工作。它需要在页眉部分的标签上固定。我们可以使用 Windows 来实现 mouseover 功能。

<!DOCTYPE html>
<html>
<head>
<title> Mouseover and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: pink;
}
</style>
</head>
<body>
<h2> Mouseover evnets in JavaScript </h2>
<div>
The javascript mouse over event works to place a pointer or move the pointer on the particular tag. It is a mouse event to handle functionality with the pointer.
</div>
<p id = "datas"> </p>
<script>
window.addEventListener("mouseover", demoOverFunction);
function demoOverFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseover function activates successfully!!!";
}
</script>
</body>
</html>

输出

输出显示了网页上的 mouseover 事件功能。

结论

在鼠标完全移出元素后，mouseover 事件才会触发。当鼠标移开网页标签后，它会被使用。

下一个主题JavaScript 中按下和释放鼠标左键

Mouseover 函数在 javascript 中的用法

语法

支持的浏览器

不支持的 HTML 元素

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

Mouseover 函数在 javascript 中的用法

语法

支持的浏览器

不支持的 HTML 元素

示例

结论

相关帖子

Javascript offsetY 属性

如何在 JavaScript 中切换密码可见性

如何在 JavaScript 中将对象转换为数组

在 JavaScript 中从字符串中移除所有空格

如何使用 JavaScript 创建图像映射

JavaScript appendchild() 方法

JavaScript Infinity 属性

将数据插入 JavaScript indexedDB

Javascript regexp 后顾

使用 Filterizr.js 进行可过滤的图库

订阅 Tpoint Tech

联系信息