首頁 >web前端 >js教程 >如何在 JavaScript/jQuery 中將遊標變更為等待狀態？

如何在 JavaScript/jQuery 中將遊標變更為等待狀態？

WBOY轉載: 2023-08-30 11:29:061336瀏覽

如何在 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屬性用於設定或傳回指標顯示哪種類型的遊標，當指標位於元素上方時，它會傳回表示可見的滑鼠遊標的字串值。自動是預設值。它屬於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 中排除一個元素的總和

看更多