首页 > 文章 > web前端 > 如何在 JavaScript/jQuery 中将光标更改为等待状态？

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

WBOY转载: 2023-08-30 11:29:061295浏览

我们可以使用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属性用于设置或返回指针显示哪种类型的光标，当指针位于元素上方时，它返回表示可见的鼠标光标的字符串值。自动是默认值。它属于JavaScript的Cursor属性。

语法

以下是在 JavaScript 中将光标更改为等待状态的语法 -

document.getElementById('id').style.cursor = 'value';

参数

为样式属性定义了不同类型的值，例如别名、全滚动、自动、单元格、上下文菜单、十字线、默认、电子调整大小、ew-调整大小、移动、n-调整大小、ne-调整大小、new-resize、none、指针、进度和继承。

返回值

指针位于某个元素上，然后返回表示所显示的鼠标光标的字符串值。

示例

在此示例中，我们将借助 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>

这里我们对函数名为 myFunction( ) 的段落标记使用了 onmouseover 鼠标事件。对于 myFunction( ) 方法，我们将使用对象“document.getElementById( )”来实现 style.cursor 属性，并且 id 将采用我们为其定义 css 元素的“box”。光标的属性值为“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 元素的进度我们在程序中指定了这一点。要将光标更改回默认状态，可以将光标属性设置为默认“$(this).css("cursor", "default")”。

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

以上是如何在 JavaScript/jQuery 中将光标更改为等待状态？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：JavaScript 中排除一个元素的总和下一篇：如何在 JavaScript 中交换两个变量？

查看更多