在 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;
}
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