如何在HTML中设置自定义光标？

Question

6

我希望为我的网站使用自定义鼠标指针图标（永久）。

我该怎么做？

鼠标指针已下载为简单的.ico文件。我尝试过自定义光标命令，但似乎没有起作用。

- Andrei Grigore

这是一个很容易在谷歌上搜索到答案的问题...(编辑：只是提醒一下，在光标上使用图像时有最大尺寸限制，但图标通常不会那么大) - KarelG

@MrLister 应该没问题。在这里也可以运行：（https://davidwalsh.name/css-custom-cursor） - Benni

3个回答

2

你可以使用CSS来实现这个功能。

html {
  cursor: url('path/to/your.ico'), default;
}

您IP地址为146.190.162.183，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。

- user6926558

MDN页面上说：“非URL回退（一个或多个其他值）必须在回退列表的末尾。”这使得您的示例无效。 - Mr Lister

@MrLister 这里正在使用“default”作为回退光标。 - A Friend

@AFriend 是的，我看到那个帖子在我的评论发布后进行了更改。谢谢你注意到了！ - Mr Lister

1

最好使用与您最符合的.cur文件，您可以从真实世界光标绘图软件中获取它，并像这样嵌入自己的光标：

cursor: url('hand.cur'),default;

- Mir Man

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Benni · Accepted Answer

7

html, body {
    cursor: url("cursor.ico"), default;
    /* just change the cursor.ico path to your location */
}

- Benni

你是否正确链接了CSS文件？请在最后添加 body { background: red; } 并告诉我们发生了什么。 - Benni

我在fiddle上尝试了一下，但对我也没有用：https://fiddle.jshell.net/w7eLknuw/ @Benni - Unknown Potato

1

这完全是由于不同的原因，@UnknownPotato。您试图从https页面加载http内容，而大多数现代浏览器都会拒绝此操作。请参见Mozilla Firefox开发控制台中的错误：

在安全页面上加载混合（不安全）显示内容“http://3.bp.blogspot.com/-pGi-q9k7u08/VjmFeCmzDqI/AAAAAAAAAC8/CLT8-wauLgw/s1600-r/Tail2.gif%257Ec200.gif”

。 - Benni

所以我按照你说的在CSS中修改了背景，它用红色替换了我的背景图片，但光标仍然不会出现... - Andrei Grigore

在您的开发者控制台中查看（通常在PC上为F12），并查看是否有错误。还要确保body中有内容，否则请在CSS的body标签中设置content: '';。@AndreiGrigore - Benni