通过 url(...) 更改 css 自定义光标

Question

如果这对您有帮助，这里是link：

正在尝试添加自定义 css 光标。如果我尝试使用标准游标测试目的，例如 "wait"，光标更改正确发生......但不是通过 url(...)

自定义 css 光标

如果没有 ", help"，则无法使 css 游标规范工作

.surpriseCursor {
 cursor: url(clapping_hands.gif), help;   /* max size = 32 X 32 pixels */
}

<a name="surprise"> </a>
<a href="#surprise" onclick="PlaySound('applause', 'applause.mp3'); return false">
<img class="surpriseCursor" src="Broken_Heart.gif"><p>
</a>

Answer 1

您需要指定一个默认光标，以防您的自定义光标无法加载，没有它您就没有正确的 CSS 属性。根据 W3C：

A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used

在大多数情况下（当然是你的）应该设置为自动。

正确代码：

.surpriseCursor {
    cursor: url(clapping_hands.gif), auto;
}

参见 link: https://www.w3schools.com/cssref/pr_class_cursor.asp

通过 url(...) 更改 css 自定义光标

changing css custom cursor via url(...)

html

css

cursor