首頁 > 文章 > web前端 > 如何使用CSS設定不同類型的遊標？

如何使用CSS設定不同類型的遊標？

WBOY轉載: 2023-09-22 19:45:031527瀏覽

如何使用CSS設定不同類型的遊標？

CSS（層疊樣式表）是設計網站視覺外觀的強大工具，包括遊標樣式。遊標是網頁設計的重要面向。它有助於向用戶提供視覺回饋，並使他們能夠有效地進行互動。

什麼是遊標？

遊標是一個位置指示器，用於指示使用者在螢幕上的目前位置。它也被稱為“插入符號”。它在使用者介面設計中起著重要作用。在CSS中，我們可以根據需要設定遊標，以向使用者提供視覺回饋，指示可以在特定位置執行的操作。

文法

css selector {
   courser : courser type;
}

現在，我們將探索可以使用CSS設定的不同類型的遊標

預設遊標

在網頁設計中，預設遊標是最常見的遊標類型，當沒有指定其他遊標時使用。它在螢幕上看起來像一個箭頭指針，表示用戶可以點擊該元素。

範例1

這裡有一個設定預設遊標的範例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      a {
         cursor: default;
      }
   </style>
</head>
<body>
   <h2>This is an example of default cursor</h2>
   <a href="https://www.tutorialspoint.com/index.htm" class="my-link">Click Here</a>
</body>
</html>

指標遊標

指標遊標由指向連結的手錶示。當用戶懸停在連結上時，它表示該元素可點擊。我們可以使用下面的程式碼來設定指標遊標 −

css-elector {
   cursor: pointer;
}

文字遊標

文字遊標是一個閃爍的水平或垂直線，它以I型遊標指標的形式顯示。當使用者懸停在文字或文字輸入欄位上時，它表示他們已編輯或選擇了文字。我們可以使用以下程式碼來設定文字遊標 -

css-elector {
   cursor: text;
}

十字準心遊標

十字準星標只是顯示為十字準星指針的水平和垂直線。十字準星光標用於在螢幕上選擇特定區域，如影像編輯工具中。我們可以使用以下程式碼設定十字準星光標 -

css-elector {
   cursor: crosshair;
}

移動遊標

移動遊標以四個箭頭指標的形式出現在螢幕上。它通常用於拖放元素，表示它可以移動。我們可以使用以下程式碼來設定行動遊標 -

css-elector {
   cursor: move;
}

不允許的遊標

不允許的遊標表示請求的操作將不會執行。它以一個帶有對角線的圓圈的形式出現。我們可以使用以下程式碼來設定不允許的遊標 -

css-elector {
   cursor: not-allowed;
}

進度遊標

進度遊標以旋轉的圓圈形式顯示。它表示程式在後台忙碌，但用戶仍然可以與介面互動。我們可以使用以下程式碼來設定進度遊標 -

css-elector {
   cursor: progress;
}

等待遊標

等待遊標顯示為旋轉的風車。它表示程式正在忙碌中，無法與使用者介面進行互動。我們可以使用以下程式碼來設定等待遊標 -

css-elector {
   cursor: wait;
}

幫助遊標

幫助遊標顯示為一個問號指標。當使用者需要協助時，例如點擊幫助圖示或按鈕時使用。我們可以使用以下程式碼設定幫助遊標 -

css-elector {
   cursor: help;
}

範例2

Here is an example of how to set the different types of cursors using CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
         background-color: lightgreen;
      }
      div{
         margin: 3px;
         padding: 5px;
      }
   </style>
</head>
<body>
   <h2>Setting the different types of cursors using CSS</h2>
   <h3>Move the mouse over the words to see the cursor change:</h3>
   <div style="cursor:default">Default</div>
   <div style="cursor:text">Text</div>
   <div style="cursor:pointer">Pointer</div>
   <div style="cursor:crosshair">Crosshair</div>
   <div style="cursor:move">Move</div>
   <div style="cursor:not-allowed">not-allowed</div>
   <div style="cursor:progress">Progressd</div>
   <div style="cursor:wait">wait</div>
   <div style="cursor:help">help</div>
   <div style="cursor:e-resize">e-resize</div>
   <div style="cursor:ne-resize">ne-resize</div>
   <div style="cursor:nw-resize">nw-resize</div>
   <div style="cursor:n-resize">n-resize</div>
   <div style="cursor:se-resize">se-resize</div>
   <div style="cursor:sw-resize">sw-resize</div>
   <div style="cursor:s-resize">s-resize</div>
   <div style="cursor:w-resize">w-resize</div>
</body>
</html>

使用CSS自訂遊標

除了CSS提供的標準遊標外，我們還可以使用自訂遊標。透過使用自訂遊標，我們可以為網站增添獨特的風格。

範例 3

以下是使用CSS建立自訂遊標的範例。

<!DOCTYPE html>  
<html>  
<head>
   <style>
      body{
         text-align: center;
      }
      .my-cursor {
         width: 200px;
         margin: auto;
         background-color: lightblue;
         cursor: url(https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto;
      }
   </style>
</head>
<body>
   <h2>Custom Cursors with CSS</h2>
   <div class="my-cursor">
      <h3>Move the mouse over to see the cursor change</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text </p>
   </div>
</body>
</html>

In the above example, we have created a div element with a class of my-cursor. We then set the cursor property to URL ( https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto。這表示瀏覽器將cursor_120340.png檔案用作自訂遊標，如果找不到或載入檔案失敗，則回退到預設遊標。

結論

在這裡，我們討論了不同類型的CSS遊標。它是網頁設計師的強大工具，可以自訂遊標樣式並為用戶互動提供視覺回饋。透過使用上面的程式碼，我們可以在CSS中設定不同類型的遊標。

以上是如何使用CSS設定不同類型的遊標？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css auto 指针 using class Property 样式表 https

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：使用 CSS 將元素居中的 4 種不同方法下一篇：使用 CSS 將元素居中的 4 種不同方法

看更多