设置自定义光标CSS无效

如何解决设置自定义光标CSS无效

我为我的网站设置了一个光标，并且使用了一个.ico文件。不过，它根本没有显示。

这是CSS：

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

有人知道吗？谢谢。

解决方法

可能是网址有问题。要进行测试而不是使用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. 由于您未发布任何html代码，因此您的浏览器可能未呈现任何内容。 html和body仅与内容一样大，因此没有内容意味着html和body的大小为0。

    html {
        height: 100%;
        width: 100%;
    }

1. 如果您在html上有内容，并且光标不起作用，则可能光标未应用于页面上的所有元素，因此您可以像这样修改光标的css，它将应用它身体上的所有元素

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