在 CSS 中將游標更改為手形指標

1. 在 CSS 中使用 cursor 屬性將滑鼠指標更改為手形指標
2. 使用 cursor 屬性中的 url() 函式將滑鼠指標更改為 CSS 中的自定義手形指標

本文將介紹在 CSS 中移動滑鼠以列出專案時將滑鼠指標更改為手形指標的方法。

在 CSS 中使用 cursor 屬性將滑鼠指標更改為手形指標

我們可以使用 CSS cursor 屬性更改滑鼠指標指向特定元素時的顯示方式。

例如，我們可以通過將 cursor 屬性的值設定為 pointer 來使用該屬性將滑鼠指標更改為手形指標。我們可以選擇 CSS 中的特定元素並應用此屬性。

cursor 屬性有很多選項。一些選項是 help、wait、crosshair、not-allowed、zoom-in 等。

例如，使用 HTML 中的 ul 和 li 標籤建立一些列表項，在 CSS 中選擇 li 標籤，並將 cursor 屬性設定為 pointer。當我們將滑鼠指標移到列表項上時，滑鼠指標將變成一個指向手。

這樣，我們就可以在 CSS 中將滑鼠指標更改為手形指標。

示例程式碼：

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: pointer;
}

使用 cursor 屬性中的 url() 函式將滑鼠指標更改為 CSS 中的自定義手形指標

我們還可以使用 CSS 的 cursor 屬性中的 url() 函式新增自定義手形指標。

我們應該在 url() 函式中指定影象的 URL。我們可以指定多個 URL 作為後備，這樣如果一個不起作用，另一個可能會起作用。

多個 url() 函式用逗號分隔。當滑鼠指標移動到特定元素時，將顯示自定義指標。

我們可以在函式中設定自定義手形指標的 URL，將滑鼠指標更改為 CSS 中的手形指標。

例如，使用與第一種方法相同的列表進行演示。在 CSS 中，選擇 li 標籤，寫入 cursor 屬性，並將 cursor 屬性設定為 url() 函式，其中 URL https://img.icons8.com/nolan/32/hand-cursor.png 是引數。接下來，在逗號後寫上 auto 作為後備。

因此，我們可以使用 url() 函式來建立一個自定義的手形指標，並在將滑鼠懸停在 CSS 中的列表上時顯示它。

示例程式碼：

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: url("https://img.icons8.com/nolan/32/hand-cursor.png"), auto;
}