极客教程如何在JavaScript/jQuery中将光标更改为等待状态
给定一个HTML文档，任务是在鼠标移动到元素上时获取等待状态的光标。在这里，我们将通过光标属性来实现，该属性允许对光标进行操作。我们将使用JavaScript来实现这一点。
方法：
- 使用 光标属性 。
- 将其值设置为 进度 ，以获取等待光标。
- 将其值设置为 默认 ，以获取标准光标。
可以使用以下语法更改光标：
object.style.cursor = value
示例1：
<!DOCTYPE HTML>
<html>
<head>
<title>
How to change cursor to waiting
in JavaScript/jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
#div {
height: 100px;
width: 200px;
background: green;
color: white;
margin: 0 auto;
}
</style>
</head>
<body style = "text-align:center;">
<h1 id = "h1" style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<div id = "div">
Hover over it
</div>
<script>
var el_up = document.getElementById("GFG_UP");
var heading = document.getElementById("h1");
var div = document.getElementById("div");
el_up.innerHTML = "Hover over the element "
+ "to see the waiting cursor.";
("#div").hover(function() {
(this).css("cursor", "progress");
}, function() {
$(this).css("cursor", "default");
});
</script>
</body>
</html>
输出：
示例2：
<!DOCTYPE HTML>
<html>
<head>
<title>
How to change cursor to waiting
in JavaScript/jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
#div {
height: 100px;
width: 200px;
background: green;
color: white;
margin: 0 auto;
}
.cursor {
cursor: progress;
}
</style>
</head>
<body style = "text-align:center;">
<h1 id = "h1" style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<div id = "div">
Hover over it
</div>
<script>
var el_up = document.getElementById("GFG_UP");
var heading = document.getElementById("h1");
var div = document.getElementById("div");
el_up.innerHTML = "Hover over the element "
+ "to see the waiting cursor.";
("#div").hover(function() {
(this).addClass('cursor');
}, function() {
$(this).removeClass('cursor');
});
</script>
</body>
</html>
输出:
示例3：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#demo {
width: 200px;
height: 50px;
padding: 25px;
background-color: green;
color: white;
font-size: 15px;
}
</style>
</head>
<body>
<h1>Welcome to GeeksForGeeks</h1>
<p id="demo" onmouseover="myFunction()">
Mouse over this text before and after you have clicked the button below!
</p>
<script>
function myFunction() {
document.getElementById("demo").style.cursor = "wait";
}
</script>
</body>
</html>
输出：
在上面的示例中，我们在<p>标签中使用了onmouseover属性，并且它调用了<script>标签中的myFunction()方法。在整个网页中，我们可以使用JS和CSS的wait属性来控制鼠标光标的样式。我们可以使用javascript中的object.style.cursor = “wait”来将光标设置为等待状态。