如何在 JavaScript/jQuery 中将光标更改为等待状态？

给定一个 HTML 文档，任务是在鼠标移到元素上时获取等待状态光标。在这里，我们将通过 cursor 属性来实现这一点，该属性允许对光标进行操作。我们将在 JavaScript 的帮助下做到这一点。
方法：

• 使用游标属性。
• 当需要等待游标时，将其值设置为progress 。
• 当需要标准光标时，将其值设置为默认值。

可以使用以下语法更改光标：

object.style.cursor = value

示例 1：

html

 
 
 

    
        How to change cursor to waiting
        in JavaScript/jQuery ?
    
     
    
    
     
    
        #div {
            height: 100px;
            width: 200px;
            background: green;
            color: white;
            margin: 0 auto;
        }
    

     
 
     
     
        GeeksforGeeks
    
     
    
    
 
     
    
        Hover over it
    
     
    
        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");
        }); 
    

 

输出：

示例 2：

html

 
 
 

    
        How to change cursor to waiting
        in JavaScript/jQuery ?
    
     
    
    
     
    
        #div {
            height: 100px;
            width: 200px;
            background: green;
            color: white;
            margin: 0 auto;
        }
        .cursor {
               cursor: progress;
           }
    

     
 
     
     
        GeeksforGeeks
    
     
    
    
 
     
    
        Hover over it
    
     
    
        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');
        }); 
    
 
 

输出：

示例 3：

HTML

  
    Document
    
      #demo {
        width: 200px;
        height: 50px;
        padding: 25px;
        background-color: green;
        color: white;
        font-size: 15px;
      }
    
  
  
    Welcome to GeeksForGeeks
    
      Mouse over this text before and after you have clicked the button below!
    
 
 
    
      function myFunction() {
        document.getElementById("demo").style.cursor = "wait";
      }
    
  

输出：

在上面的例子中，我们在

标签中使用了 onmouseover 属性，它在