我們可以使用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中文網其他相關文章！
