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

Custom cursor not working correctly in Chrome

提问by theburningmonk

I'm having trouble getting chrome to display my custom cursor correctly but it seems to work as intended in FireFox.

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

To give a little context, as part of my attempt to get up to speed with HMLT5/Javascript I'm putting together a mini shooting game using the new canvas element and I'm using a custom scope-like cursor I created with Axialis Cursor Workshop and here's the html and css for the canvas:

为了提供一些背景信息，作为我尝试加快 HMLT5/Javascript 速度的一部分，我正在使用新的画布元素组合一个迷你射击游戏，我正在使用我使用 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);
}

In chrome, I see a warning saying "Resource interpreted as image but transferred with MIME type application/octet-stream." in relation to the scope.curfile. When I move my mouse to the top left corner of the canvas area I can see the cursor is drawn but the 'hot spot' of cursor is not at the center of the cursor.

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

In firefox, this works with no problem, I can still see the same cursor and the 'hot spot' of the cursor is at its center as I intended.

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

Any idea what I'm doing wrong here and how can I fix it for chrome? The standard crosshaircursor works fine in chrome (in that its 'hot spot' is positioned correctly) but it doesn't quite fit my purpose here.

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

You can see for yourself here, just move the cursor to the top left corner in chrome and firefox to see the difference.

您可以在此处亲自查看，只需将光标移动到 chrome 和 firefox 中的左上角即可查看差异。

回答by Salvador

To solve the "Resource interpreted as image..." warning:

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

• Create a text file named .htaccess

• Write this command: AddType image/vnd.microsoft.icon .cur

• Save in folder /cursorsOR in any parent-folder (typically the site root /)

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

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

• 保存在文件夹/cursors或任何父文件夹中（通常是站点根目录/）

This should work on Apacheserver.

这应该适用于Apache服务器。

Here a postabout this solution.

这里有一篇关于这个解决方案的帖子。

回答by theburningmonk

For anyone interested, I solved this problem in the end though it's a bit of a hack.

对于任何感兴趣的人，我最终解决了这个问题，尽管它有点黑客。

I first tried using a blank cursor but then Chrome renders that as a black square.. so I decided to draw the target as part of the canvas and use a cursor which has hotspot at 0, 0 and is blank EXCEPT the 0, 0 tile which has the same colour as the target.

我首先尝试使用空白光标，但随后 Chrome 将其呈现为黑色方块.. 所以我决定将目标绘制为画布的一部分，并使用一个光标，该光标在 0, 0 处有热点并且除了 0, 0 平铺之外是空白的与目标颜色相同。

You can see the result hereonce you start the game, it's not a pretty solution, but works nonetheless.

开始游戏后，您可以在此处看到结果，这不是一个很好的解决方案，但仍然有效。

回答by Yega

My reply is probably way too late by now but this should work in chrome:

我的回复现在可能已经太晚了，但这应该适用于 chrome：

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

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

You might also need to write a little script that checks for browser types using the jQuery $.browserproperty.

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

Read this: Cross browser css - grab cursors for dragging/

阅读：跨浏览器 css - 抓取光标进行拖动/

Note: I believe MIME type problem has already been addressed.

注意：我相信 MIME 类型问题已经得到解决。

回答by Lordalcol

I think there are two different problems here.

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

1. The first ("Resource interpreted as image but transferred with MIME type application/octet-stream.") should be fixed server-side. The server must send scope.cur as image MIME, not octet-stream. You could try to change the format of the .cur file (i.e. .png) or you could write a .htaccess file with the right MIME.

2. There should be and properties for CSS3 "cursor": http://www.w3.org/TR/css3-ui/#cursor, but I have tried this in Chrome and it does not seem to work:

   cursor: url(../cursors/scope.cur) -10px -10px, crosshair;

1. 第一个（“资源被解释为图像但使用 MIME 类型应用程序/八位字节流传输。”）应该是固定的服务器端。服务器必须将 scope.cur 作为图像 MIME 发送，而不是八位字节流。您可以尝试更改 .cur 文件（即 .png）的格式，或者您可以使用正确的 MIME 编写一个 .htaccess 文件。

2. CSS3“光标”应该有和属性：http: //www.w3.org/TR/css3-ui/#cursor，但我在Chrome中尝试过这个，它似乎不起作用：

   光标： url(../cursors/scope.cur) -10px -10px，十字准线；