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 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設置不同類型的光標？的詳細內容，更多請關注www.92cms.cn其它相關文章！
