迹忆客 专注技术分享

本文将介绍在 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;
}