数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 JavaScript/jQuery 中将光标更改为等待状态？
我们可以使用 onmouseover 和 onmouseout 事件将光标设置为或更改为等待状态。在 JavaScript 中，我们有不同类型的鼠标事件，它们执行不同的鼠标功能。让我们看看一些鼠标事件。
onmousedown - 当鼠标按钮在 HTML 元素上按下时发生此事件
onmouseenter - 当指针移入元素时发生
onmousemove - 当指针在 HTML 元素上移动时发生此事件
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 属性用于设置或返回指针显示的游标类型，当指针悬停在元素上时，它返回表示可见鼠标光标的字符串值。auto 是默认值。它属于 JavaScript 的 Cursor 属性。
语法
以下是使用 JavaScript 将光标更改为等待状态的语法：
document.getElementById('id').style.cursor = 'value';
参数
为 style 属性定义了不同类型的数值，例如 alias、all-scroll、auto、cell、context-menu、crosshair、default、e-resize、ew-resize、move、n-resize、ne-resize、nesw-resize、none、pointer、progress 和 inherit。
返回值
当指针悬停在元素上时，它返回表示显示的鼠标光标的字符串值。
示例
在这个示例中，我们将使用 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>
这里我们使用 onmouseover 鼠标事件来处理段落标签，函数名为 myFunction()。对于该 myFunction() 方法，我们将实现 style.cursor 属性，对象为 “document.getElementById()”，id 将取为 “box”（我们为此定义了 CSS 元素）。光标的属性值为 “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 元素的进度（我们在程序中指定了该元素）。要将光标恢复到其默认状态，您可以将 cursor 属性设置为默认值 “$(this).css("cursor", "default")”。
在本文中，我们解释了如何将光标更改为等待状态以及相关的示例。我们在这里看到了两个不同的示例，在第一个示例中，我们使用 onmouseover 事件来更改光标状态。在第二个示例中，我们使用 onmouseover 和 onmouseout 事件将光标更改为等待状态。对于 JavaScript 的两个示例，我们都使用 style.cursor 属性来定义光标的值。对于第三个示例，我们使用 jQuery 来更改使用 jQuery 光标属性的光标外观。
1K+ 次浏览
