Question

我有以下内容：

.custom {
  cursor: url(images/my-cursor.png), auto;
}

我想知道是否可以针对不同功能使用不同的 custom 游标。这意味着我可以为同一页面使用自定义.pointer光标和自定义.default指针吗？

Answer 1

是的，您可以在一页上使用多个自定义光标。

“通过MDN

将游标属性指定为零个或多个值，并用逗号分隔”

如果您想一次显示多个，则必须编写一些JavaScript。

Answer 2

可以。您如何去做取决于您要做什么。如果您使用的是自定义游标，则只需最后一个值即可与网络浏览器中可用的默认keyword values匹配。要指定具有自定义后备广告的自定义游标，只需将两个自定义游标URL添加到游标值列表，然后为最终条目选择默认的关键字值，如下所示：

.custom {
  cursor:url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Pixel_51_icon_cursor_click_left.svg/120px-Pixel_51_icon_cursor_click_left.svg.png), 
  url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Pixel_51_icon_cursor_click_up.svg/50px-Pixel_51_icon_cursor_click_up.svg.png),
  auto;
}

以下是使用自定义第二个光标值的示例：https://jsfiddle.net/mzuaqy9w/39/

（此演示中使用的自定义光标是从Wikimedia Commons访问的。）

一页上有多个自定义光标

2 个答案: