使用 CSS 和 JavaScript 隱藏網頁游標

在本教程中，我們將學習如何使用CSS和JavaScript隱藏網頁中的游標。有時，我們需要建立我們自己的樣式游標，然後需要隱藏游標。也可能需要為特定的HTML元素隱藏游標。

有兩種方法可以在網頁上隱藏游標。一種使用CSS，另一種使用JavaScript。我們將在本教程中逐一學習這兩種方法。

使用 CSS 隱藏網頁游標

CSS允許我們更改游標的樣式。我們可以使用CSS建立不同型別的游標。如果我們不想顯示游標，可以將樣式“cursor: none”應用於特定的HTML元素。

語法

使用者可以按照以下語法使用 CSS 隱藏游標。

CSS Selector {
   cursor: none;
}

示例

在這個例子中，我們建立了一個 div 元素，並給它設定了適當的高度和寬度。我們還使用 CSS 為 div 應用了紅色背景顏色。之後，我們將 class 屬性新增到 div 元素並將其初始化為“test”值。

我們在 CSS 中使用 test 類名作為 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元素的屬性，cursor 是 style 物件的屬性。我們將 cursor 屬性的值更改為“none”。

示例

在下面的示例中，我們透過`

廣告
© . All rights reserved.