Dado un documento HTML y la tarea es obtener el cursor de estado de espera cuando el mouse se mueve sobre un elemento. Aquí vamos a lograr eso mediante la propiedad del cursor que permite realizar una operación en el cursor. Vamos a hacer eso con la ayuda de JavaScript.
Acercarse:
- Utilice la propiedad del cursor .
- Establezca su valor para progresar cuando se necesite un cursor en espera.
- Establezca su valor por defecto cuando se necesite un cursor estándar.
El cursor se puede cambiar usando la siguiente sintaxis:
object.style.cursor = value
Ejemplo 1:
html
<!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>
Producción:
Ejemplo 2:
html
<!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>
Producción:
Ejemplo 3:
HTML
<!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>
Producción:
En el ejemplo anterior, hemos utilizado la propiedad onmouseover en la etiqueta <p> y ha llamado al método myFunction() en la etiqueta <script>. Podemos usar la propiedad de espera con el cursor del mouse en JS y CSS en toda la página web. Podemos configurar el cursor para que espere usando object.style.cursor = «wait» en javascript.
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA