在 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