设置自定义光标 (CSS) 无效

Setting a custom cursor (CSS) didn't work

我为我的网站设置了光标，并使用了 .ico 文件。虽然，它根本没有显示。

这是 css:

html, body {
    cursor: url("images/39020_fPv_icon.ico"), url("images/39020.png"), default;
  }

有人知道吗？谢谢

url 可能存在问题。测试这个而不是使用 default 使用 crosshair 并查看光标是否改变，也不是样式可能缓存在浏览器中所以在大多数浏览器上 Ctrl+F5 应该重新加载页面而不缓存。

html, body {
    cursor: url("images/39020_fPv_icon.ico"), url("images/39020.png"), crosshair;
}

如果它将光标更改为 crosshair 那么问题出在您的 url 上，您可以诊断 url 或您可以对光标图像进行 base64 编码会给你两个好处。

  1. 您不必担心移动文件或维护链接
  2. 如果您部署到新环境，则无需担心光标图像或它们的存储位置。

虽然这有一个缺点，那就是它会使您的 css 文件更大，但是由于通常光标图像非常小，所以这应该不是什么大问题。

如何对图像进行 base64 编码您可以 google 搜索“base64 编码图像”，最上面的结果是 base64-image.de 这是我过去使用过的网站。 css 看起来像这样

html, body {
    cursor: url("data:image/gif;base64,R0lGODdhBQAFAPABAP////8AACwAAAAABQAFAAACCARihhe9q0wBADs=="), crosshair;
  }

现在，如果将 default 更改为 crosshair 仍然没有任何效果怎么办？那么有两种可能

  1. 因为您没有 post 任何 html 代码，所以您的浏览器可能没有呈现任何内容。 html 和 body 只会和内容一样大，所以没有内容意味着 html 和 body.
    2. 大小为 0 
    html {
        height: 100%;
        width: 100%;
    }
  1. 如果您在 html 上有内容但光标不起作用，则可能是光标未应用于页面上的所有元素，因此您可以修改 css对于这样的光标，它将把它应用到 body
    2. 上的所有元素 
    html, body, body * {
        cursor: url("images/39020_fPv_icon.ico"), url("images/39020.png"), default;
    }