javascript - 自定义光标在 Chrome 中无法正常工作

Question

我无法让 chrome 正确显示我的自定义光标，但它似乎在 FireFox 中按预期工作。

为了提供一些背景信息，作为我尝试加快 HMLT5/Javascript 速度的一部分，我正在使用新的 Canvas 元素制作一个迷你射击游戏，并且我正在使用我创建的自定义类似范围的光标使用 Axialis Cursor Workshop，这里是 Canvas 的 html 和 css:

<canvas id="canvas" class="block" width="800" height="700"
        onSelectStart="this.style.cursor='url(cursors/scope.cur), crosshair'; return false;"/>

#canvas
{
    cursor: url(../cursors/scope.cur), crosshair;
    background: url(../images/canvas_background.jpg);
}

在 chrome 中，我看到关于 scope.cur 文件的警告说“资源被解释为图像，但使用 MIME 类型应用程序/八位字节流传输。” .当我将鼠标移动到 Canvas 区域的左上角时，我可以看到光标已绘制，但光标的“热点”不在光标的中心。

在 firefox 中，这没有问题，我仍然可以看到相同的光标，并且光标的“热点”如我所愿位于其中心。

知道我在这里做错了什么以及如何为 chrome 修复它吗？标准的 crosshair 光标在 chrome 中工作正常(因为它的“热点”位置正确)但它不太符合我在这里的目的。

你自己看here ，只需将光标移动到 chrome 和 firefox 的左上角即可查看差异。

Answer 1

解决“Resource interpreted as image...”警告:

• 创建一个名为.htaccess 的文本文件

• 写这个命令: AddType image/vnd.microsoft.icon.cur

• 保存在文件夹 /cursors 或任何父文件夹(通常是网站根目录 /)

这应该适用于 Apache 服务器。

Here a post关于这个解决方案。