資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 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://tutorialspoint.tw/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
這是一個使用 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>
在上面的示例中，我們建立了一個具有 my-cursor 類的 div 元素。然後我們將 cursor 屬性設定為 URL ( https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto。這意味著瀏覽器使用 cursor_120340.png 檔案作為自定義滑鼠指標，如果找不到或無法載入該檔案，則回退到預設滑鼠指標。
結論
在這裡，我們討論了不同型別的 CSS 滑鼠指標。它是一個強大的工具，允許網頁設計師自定義滑鼠指標樣式併為使用者互動提供視覺反饋。使用上面的程式碼，我們可以在 CSS 中設定不同型別的滑鼠指標。
瀏覽量：134
