我们可以使用onmouseover、onmouseout事件来设置或改变光标进入等待状态。在 JavaScript 中，我们有不同类型的鼠标事件，它们对鼠标执行不同的功能。让我们看看一些鼠标事件。
onmousedown - 当鼠标按钮在 HTML 元素上按下时发生这些事件
onmouseenter - 当指针移出元素时发生
-
onmousemove - 当指针在 HTML 元素上移动时发生这些事件
立即学习“Java免费学习笔记（深入）”；
onmouseout - 当指针离开元素时发生
onmouseover - 当鼠标悬停在 HTML 元素上时，会发生此事件。
onmouseup - 指针按钮在 HTML 元素上释放
当指针离开 HTML 元素时，将使用 onmouseover 和 onmouseout 事件。 onmouseover 与 onmouseenter 事件非常相似，不同之处在于 onmouseenter 不会冒泡。 onmouseover 事件不适用于 HTML 标签 - html、head、title、style、meta、base、bdo、br、iframe、param 和 script。
style.cursor属性用于设置或返回指针显示哪种类型的光标，当指针位于元素上方时，它返回表示可见的鼠标光标的字符串值。自动是默认值。它属于JavaScript的Cursor属性。
语法
以下是在 JavaScript 中将光标更改为等待状态的语法 -
document.getElementById('id').style.cursor = 'value';
参数
为样式属性定义了不同类型的值，例如别名、全滚动、自动、单元格、上下文菜单、十字线、默认、电子调整大小、ew-调整大小、移动、n-调整大小、ne-调整大小、new-resize、none、指针、进度和继承。
返回值
指针位于某个元素上，然后返回表示所显示的鼠标光标的字符串值。
示例
在此示例中，我们将借助 JavaScript 将光标更改为等待状态。
<html>
<head>
<style>
#textbox {
padding: 16px ;
text-align: center;
font-size: 18px;
height: 90px;
background-color: grey;
width: 500px;
color: white;
}
</style>
</head>
<body>
<h2>Changing Cursor to Waiting State</h2>
<p id="textbox" onmouseover="sampleFunction()">
This is a sample program to see how to change the cursor appearance when the pointer is over an element
</p>
<script>
function sampleFunction() {
document.getElementById("textbox").style.cursor = "wait";
}
</script>
</body>
</html>
这里我们对函数名为 myFunction( ) 的段落标记使用了 onmouseover 鼠标事件。对于 myFunction( ) 方法，我们将使用对象“document.getElementById( )”来实现 style.cursor 属性，并且 id 将采用我们为其定义 css 元素的“box”。光标的属性值为“wait”，这意味着当光标悬停在 HTML 元素上时，每当光标出现时，光标都会显示为等待状态。
示例
让我们再举一个例子，看看如何使用不同的鼠标事件在 JavaScript 中将光标更改为等待状态。
<html>
<head>
<style>
#mybutton {
cursor: default;
}
</style>
</head>
<body>
<button id="mybutton">Hover over me</button>
<script>
document.getElementById("mybutton").onmouseover = function() {
document.getElementById("mybutton").style.cursor = "wait";
}
document.getElementById("mybutton").onmouseout = function() {
document.getElementById("mybutton").style.cursor = "default";
}
</script>
</body>
</html>
当鼠标悬停在元素上时，光标外观变为等待状态，如下图所示 -
示例
在这些示例中，我们将了解如何借助 jQuery 将光标更改为等待状态。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
#event {
height: 50px;
padding: 30px;
height: 60px;
margin: 2 auto;
color: white;
width: 650px;
background: grey;
}
#center {
text-align:center;
}
</style>
</head>
<body id="center">
<h2>Changing the Cursor Appearance</h2>
<div id = "event">
Mouse Hover
</div>
<script>
$("#event").hover(function() {
$(this).css("cursor", "progress");
}, function() {
$(this).css("cursor", "default");
});
</script>
</body>
</html>
当鼠标悬停在某个元素上时，光标外观变为等待状态，如下图所示 -
当鼠标离开元素时，光标外观返回默认值，如图所示 -
正如我们在示例中看到的，这里我们使用“$(this).css("cursor", "progress")”将光标状态更改为 div 元素的进度我们在程序中指定了这一点。要将光标更改回默认状态，可以将光标属性设置为默认“$(this).css("cursor", "default")”。
在本文中，我们通过示例解释了如何将光标更改为等待状态。我们在这里看到了两个不同的示例，在第一个示例中，我们使用 onmouseover 事件来更改光标状态。在第二个示例中，我们使用 onmouseover 和 onmouseout 事件将光标更改为等待状态。对于 JavaScript 的两个示例，我们使用 style.cursor 属性来定义光标的值。对于第三个示例，我们使用 jQuery 通过 jQuery 光标属性来更改光标外观。
