如何在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';

参数

风格属性可以定义为不同类型的值，例如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元素。而cursor属性值为“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属性设置为default，如“$(this).css("cursor", "default")”。

在本文中，我们解释了如何将鼠标指针更改为等待状态，并提供了示例。我们在这里看到了两个不同的示例，第一个示例中我们使用了onmouseover事件来更改鼠标指针状态。在第二个示例中，我们使用了onmouseover和onmouseout事件来将鼠标指针更改为等待状态。对于这两个JavaScript示例，我们使用style.cursor属性来定义鼠标指针的值。对于第三个示例，我们使用jQuery来使用jQuery鼠标指针属性来更改鼠标指针的外观。