首頁 > web前端 > css教學 > 使用 CSS 和 JavaScript 隱藏網頁上的遊標

使用 CSS 和 JavaScript 隱藏網頁上的遊標

PHPz
發布: 2023-09-17 19:53:03
轉載
753 人瀏覽過

使用 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 中使用測試類別名稱作為 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"; 
登入後複製

在上面的語法中,styletestDiv元素的屬性,而遊標是style物件的屬性。我們將遊標屬性的值變更為「none」。

範例

在下面的範例中,我們透過

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板