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

Sushant Poudel 2023年1月30日 2021年12月20日
  1. 在 CSS 中使用 cursor 屬性將滑鼠指標更改為手形指標
  2. 使用 cursor 屬性中的 url() 函式將滑鼠指標更改為 CSS 中的自定義手形指標
在 CSS 中將游標更改為手形指標

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

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

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

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

cursor 屬性有很多選項。一些選項是 helpwaitcrosshairnot-allowedzoom-in 等。

例如,使用 HTML 中的 ulli 標籤建立一些列表項,在 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;
}
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn