How to change cursor to wait state in JavaScript/jQuery?-JS Tutorial-php.cn

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

WBOY

Release： 2023-08-30 11:29:06

forward

1250 people have browsed it

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

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!