search

Home >Web Front-end >JS Tutorial >How to change cursor to wait state in JavaScript/jQuery?

How to change cursor to wait state in JavaScript/jQuery?

WBOY
WBOYforward
2023-08-30 11:29:061337browse

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

We can use onmouseover and onmouseout events to set or change the cursor into a waiting state. In JavaScript, we have different types of mouse events that perform different functions on the mouse. Let's look at some mouse events.

  • onmousedown - These events occur when the mouse button is pressed on an HTML element

  • onmouseenter - Occurs when the pointer moves out of an element

  • onmousemove - These events occur when the pointer moves over an HTML element

  • onmouseout - Occurs when the pointer leaves the element

  • onmouseover - This event occurs when the mouse is over an HTML element.

  • onmouseup - Pointer button released on HTML element

The onmouseover and onmouseout events are used when the pointer leaves the HTML element. The onmouseover event is very similar to the onmouseenter event, except that onmouseenter does not bubble. The onmouseover event does not work with HTML tags - html, head, title, style, meta, base, bdo, br, iframe, param and script.

The style.cursor property is used to set or return what type of cursor the pointer displays. When the pointer is over the element, it returns a string value representing the visible mouse cursor. Automatic is the default value. It belongs to JavaScript's Cursor property.

grammar

The following is the syntax to change the cursor to a wait state in JavaScript -

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

parameter

Different types of values ​​are defined for style properties such as alias, full-scroll, auto, cell, context-menu, crosshair, default, e-resize, ew-resize, move, n-resize, ne- resize, new-resize, none, pointers, progress, and inheritance.

return value

The pointer is positioned over an element, and a string value representing the displayed mouse cursor is returned.

Example

In this example, we will change the cursor into a wait state with the help of 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>

Here we use the onmouseover mouse event for the paragraph mark with the function name myFunction(). For the myFunction( ) method, we will use the object "document.getElementById( )" to implement the style.cursor property, and the id will take the "box" for which we defined the css element. The cursor's attribute value is "wait", which means that when the cursor is hovering over an HTML element, the cursor will appear in a wait state whenever it appears.

Example

Let’s take another example and see how to change the cursor into a wait state in JavaScript using different mouse events. 

<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>

When the mouse hovers over the element, the cursor appearance changes to the waiting state, as shown in the figure below -

Example

In these examples, we will see how to change the cursor into a wait state with the help of 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>

When the mouse hovers over an element, the cursor appearance changes to the waiting state, as shown in the figure below -

When the mouse leaves the element, the cursor appearance returns to the default value, as shown in the figure -

As we can see in the example, here we use "$(this).css("cursor", "progress")" to change the cursor state to the progress of the div element we use in the program This is specified in . To change the cursor back to the default state, you can set the cursor properties to the default "$(this).css("cursor", "default")".

In this article, we explain with examples how to change the cursor to wait state. We see two different examples here, in the first example we use the onmouseover event to change the cursor state. In the second example, we use the onmouseover and onmouseout events to change the cursor into the wait state. For both examples in JavaScript, we use the style.cursor property to define the value of the cursor. For the third example, we use jQuery to change the cursor appearance through the jQuery cursor properties.

The above is the detailed content of How to change cursor to wait state in JavaScript/jQuery?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Exclude the sum of an element in JavaScriptNext article：Exclude the sum of an element in JavaScript

Related articles

See more