使用 CSS 和 JavaScript 隱藏網頁上的遊標
- PHPz轉載
- 2023-09-17 19:53:03727瀏覽
在本教學中，我們將學習使用 CSS 和 JavaScript 在網頁中隱藏遊標。有時，我們需要建立樣式遊標，然後需要隱藏遊標。也許它還需要隱藏特定 HTML 元素的遊標。
有兩種方法可以隱藏網頁上的遊標。一種使用 CSS，另一種使用 JavaScript。我們將在本教程中一一學習這兩種方法。
使用CSS隱藏網頁上的遊標
CSS 允許我們更改遊標的樣式。我們可以使用 CSS 來建立不同類型的遊標。如果我們不想顯示遊標，我們可以將樣式「cursor: none」套用到特定的 HTML 元素。
文法
使用者可以依照以下語法使用 CSS 隱藏遊標。
CSS Selector {
cursor: none;
}
範例
在此範例中，我們建立了 div 元素並指定了正確的高度和寬度。此外，我們也使用 CSS 將紅色背景顏色套用到 div。之後，我們將 class 屬性新增至 div 元素並使用「test」值對其進行初始化。
我們在 CSS 中使用測試類別名稱作為 CSS 選擇器，並將「cursor: none」樣式套用到 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>
在上面的輸出中，使用者可以觀察到當使用者將遊標移入 div 元素時間標消失。
使用JavaScript隱藏網頁上的遊標
我們可以使用JavaScript 來更改任何HTML 元素的樣式。每個 HTML 元素都包含 style 屬性，我們可以透過將 HTML 元素作為引用來存取該屬性。之後，我們可以存取 style 屬性的特定樣式屬性並更改其值。在這裡，我們將使用 JavaScript 將 cursor 屬性的值變更為 none。
文法
使用者可以依照以下語法使用 JavaScript 隱藏網頁上的遊標。
let testDiv = document.getElementById("test");
testDiv.style.cursor = "none";
在上面的語法中，style是testDiv元素的屬性，而遊標是style物件的屬性。我們將遊標屬性的值變更為「none」。
範例
在下面的範例中，我們透過 <script> 標籤中的 id 存取了 HTML div 元素。之後，我們必須將其樣式物件的遊標屬性值變更為「none」以隱藏該特定 div 元素中的遊標。 </script>
<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>
在上面的輸出中，當使用者點擊「在 Div 上隱藏遊標」按鈕時，它會隱藏 div 元素上的遊標。
我們學習了兩種將遊標隱藏在網頁上特定 HTML 元素上的方法。使用者可以根據自己想要從 CSS 還是 JavaScript 更改遊標樣式來使用其中一種方式。
以上是使用 CSS 和 JavaScript 隱藏網頁上的遊標的詳細內容。更多資訊請關注PHP中文網其他相關文章！