¿Cómo cambiar el cursor al estado de espera en JavaScript/jQuery?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *