Question

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

为了给出一些上下文，作为我尝试使用HMLT5 / Javascript加速的一部分，我正在使用新的canvas元素组合一个迷你射击游戏，我正在使用我创建的自定义范围类型的游标使用Axialis Cursor Workshop，这里是画布的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中，我看到一条警告说“资源被解释为图像但是使用MIME类型application / octet-stream。”与 scope.cur 文件相关联。当我将鼠标移动到画布区域的左上角时，我可以看到光标被绘制但光标的“热点”不在光标的中心。

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

知道我在这里做错了什么，如何修复它？标准的十字准线光标在chrome中工作得很好（因为它的“热点”位置正确），但它不太符合我的目的。

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

Answer 1

解决“资源解释为图像...”警告：

创建名为.htaccess
编写此命令： AddType image/vnd.microsoft.icon .cur
保存在文件夹/cursors或任何父文件夹（通常是网站根/）

这应该适用于 Apache 服务器。

Here a post关于此解决方案。

Answer 2

对于任何有兴趣的人，我最终解决了这个问题，虽然这有点像黑客。

我首先尝试使用空白光标，然后Chrome将其渲染为黑色方块..所以我决定将目标绘制为画布的一部分并使用一个热点位于0,0的光标并且是空白除了0 ，0个与目标颜色相同的图块。

一旦你开始游戏，你可以看到结果here，这不是一个漂亮的解决方案，但仍然有效。

Answer 3

我认为这里有两个不同的问题。

第一个（“资源解释为图像，但使用MIME类型application / octet-stream传输。”）应该是服务器端固定的。服务器必须将scope.cur作为图像MIME发送，而不是octet-stream。您可以尝试更改.cur文件的格式（即.png），也可以使用正确的MIME编写.htaccess文件。
应该有CSS3“光标”的属性和属性：http://www.w3.org/TR/css3-ui/#cursor，但我在Chrome中尝试了这个并且它似乎不起作用：

cursor：url（../ cursors / scope.cur）-10px -10px，crosshair;

Answer 4

我的回复可能为时已晚，但这应该适用于chrome：

cursor: url(../cursors/scope.cur) 4 4, crosshair;

您可能还需要编写一个使用jQuery $.browser属性检查浏览器类型的小脚本。

阅读本文：Cross browser css - grab cursors for dragging/

注意：我认为MIME类型问题已经解决。

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

4 个答案: