資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 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 屬性用於設定或返回指標顯示的遊標型別，當指標懸停在元素上時，它返回表示可見滑鼠游標的字串值。auto 是預設值。它屬於 JavaScript 的 Cursor 屬性。
語法
以下是使用 JavaScript 將游標更改為等待狀態的語法：
document.getElementById('id').style.cursor = 'value';
引數
為 style 屬性定義了不同型別的數值，例如 alias、all-scroll、auto、cell、context-menu、crosshair、default、e-resize、ew-resize、move、n-resize、ne-resize、nesw-resize、none、pointer、progress 和 inherit。
返回值
當指標懸停在元素上時，它返回表示顯示的滑鼠游標的字串值。
示例
在這個示例中，我們將使用 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>
這裡我們使用 onmouseover 滑鼠事件來處理段落標籤，函式名為 myFunction()。對於該 myFunction() 方法，我們將實現 style.cursor 屬性，物件為 “document.getElementById()”，id 將取為 “box”（我們為此定義了 CSS 元素）。游標的屬性值為 “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 元素的進度（我們在程式中指定了該元素）。要將游標恢復到其預設狀態，您可以將 cursor 屬性設定為預設值 “$(this).css("cursor", "default")”。
在本文中，我們解釋瞭如何將游標更改為等待狀態以及相關的示例。我們在這裡看到了兩個不同的示例，在第一個示例中，我們使用 onmouseover 事件來更改游標狀態。在第二個示例中，我們使用 onmouseover 和 onmouseout 事件將游標更改為等待狀態。對於 JavaScript 的兩個示例，我們都使用 style.cursor 屬性來定義游標的值。對於第三個示例，我們使用 jQuery 來更改使用 jQuery 游標屬性的游標外觀。
1K+ 次瀏覽
