在本教程中，我們將學(xué)習(xí)使用 CSS 和 JavaScript 在網(wǎng)頁中隱藏光標(biāo)。有時，我們需要創(chuàng)建樣式光標(biāo)，然后需要隱藏光標(biāo)。也許它還需要隱藏特定 HTML 元素的光標(biāo)。
有兩種方法可以隱藏網(wǎng)頁上的光標(biāo)。一種使用 CSS，另一種使用 JavaScript。我們將在本教程中一一學(xué)習(xí)這兩種方法。
使用CSS隱藏網(wǎng)頁上的光標(biāo)
CSS 允許我們更改光標(biāo)的樣式。我們可以使用 CSS 創(chuàng)建不同類型的光標(biāo)。如果我們不想顯示光標(biāo)，我們可以將樣式“cursor: none”應(yīng)用于特定的 HTML 元素。
語法
用戶可以按照以下語法使用 CSS 隱藏光標(biāo)。
CSS Selector {
cursor: none;
}
登錄后復(fù)制
示例
在此示例中，我們創(chuàng)建了 div 元素并指定了正確的高度和寬度。此外，我們還使用 CSS 將紅色背景顏色應(yīng)用于 div。之后，我們將 class 屬性添加到 div 元素并使用“test”值對其進行初始化。
我們在 CSS 中使用測試類名稱作為 CSS 選擇器，并將“cursor: none”樣式應(yīng)用于 div 元素。
<html>
<head>
<style>
.test {
/* style to hide the cursor */
cursor: none;
height: 300px;
width: 300px;
background-color: red;
}
</style>
</head>
<body>
<h2>
Hiding the cursor using <i> CSS. </i>
</h2>
<!-- hiding the cursor in this div element -->
<div class="test">Hiding the cursor for this div.</div>
</body>
</html>
登錄后復(fù)制
在上面的輸出中，用戶可以觀察到當(dāng)用戶將光標(biāo)移入 div 元素時光標(biāo)消失。
使用JavaScript隱藏網(wǎng)頁上的光標(biāo)
我們可以使用JavaScript 來更改任何HTML 元素的樣式。每個 HTML 元素都包含 style 屬性，我們可以通過將 HTML 元素作為引用來訪問該屬性。之后，我們可以訪問 style 屬性的特定樣式屬性并更改其值。在這里，我們將使用 JavaScript 將 cursor 屬性的值更改為 none。
語法
用戶可以按照以下語法使用 JavaScript 隱藏網(wǎng)頁上的光標(biāo)。
let testDiv = document.getElementById("test");
testDiv.style.cursor = "none";
登錄后復(fù)制
在上面的語法中，style是testDiv元素的屬性，光標(biāo)是style對象的屬性。我們將光標(biāo)屬性的值更改為“none”。
示例
在下面的示例中，我們通過 標(biāo)記中的 id 訪問了 HTML div 元素。之后，我們必須將其樣式對象的光標(biāo)屬性值更改為“none”以隱藏該特定 div 元素中的光標(biāo)。
<html>
<head>
<style>
.test {
height: 300px;
width: 300px;
background-color: blue;
}
</style>
</head>
<body>
<h2>Hiding the cursor using <i>JavaScript.</i></h2>
<div class="test" id="test">Hiding the cursor for this div.</div>
</br>
<button onClick="HideCursor()">Hide cursor on Div</button>
<script>
// Accessing the HTML element by id
let testDiv = document.getElementById("test");
function HideCursor() {
// hiding the cursor
testDiv.style.cursor = "none";
}
</script>
</body>
</html>
登錄后復(fù)制
在上面的輸出中，當(dāng)用戶單擊“在 Div 上隱藏光標(biāo)”按鈕時，它會隱藏 div 元素上的光標(biāo)。
我們學(xué)習(xí)了兩種將光標(biāo)隱藏在網(wǎng)頁上特定 HTML 元素上的方法。用戶可以根據(jù)自己想要從 CSS 還是 JavaScript 更改光標(biāo)樣式來使用其中一種方式。
以上就是使用 CSS 和 JavaScript 隱藏網(wǎng)頁上的光標(biāo)的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
