在 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