内部 CSS 光标 URL 不工作，有什么提示吗？

Question

我正在尝试使用光标添加自定义光标：url 但它不起作用。我尝试了不同的链接和不同的浏览器（我目前在 Chrome），但仍然无法正常工作。有人可以帮助我吗，我是编码新手 CSS.

 <head>
    <link rel="shortcut icon" href="https://www.stickpng.com/assets/images/58485538b772315a9e4dd5d9.png" />
  <title>
     Ella's (kinda) First Webpage
  </title>    
   <style>
  
    body {
       cursor: url('https://www.stickpng.com/assets/images/58485538b772315a9e4dd5d9.png'), auto;
       } 
</style>

Answer 1

可用作自定义光标的图像类型有限制。作为参考检查此 link。我会说你的图片太大（最大 32x32px）。

尝试使用以下代码将 url 添加到 32 像素的占位符图像。

body {
height: 100vh;
width: 100vw;
   cursor:url(https://via.placeholder.com/32), auto;
   }

Answer 2

使用 .png、.cur 或 .gif 作为光标，并且不要使用大于 32px 的图片，因为某些浏览器不支持更高的尺寸。

示例如下：

html {
  height: 100vh;
  width: 100vw;
  cursor: url('https://reygif.com/media/emoticon-hello-kitty-18039.gif'), auto;
}

<h1>
  Ella's (kinda) First Webpage
</h1>

Answer 3

58485538b772315a9e4dd5d9.png 的文件尺寸太大，调整大小。

我已经下载了文件并用 Photoshop 调整了它的大小 (43px × 34px)，它成功了！

内部 CSS 光标 URL 不工作，有什么提示吗？

Internal CSS Cursor URL Not Working, any tips?

html

css

cursor