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

问题描述：

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

为了给出一点内容，作为我尝试使用HMLT5/Javascript加速的一部分，我将使用新的canvas元素组合一个迷你射击游戏，并使用自定义的作用域类游标I与Axialis光标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类型应用程序/八位字节流传输”。与scope.cur文件的关系。当我将鼠标移动到画布区域的左上角时，我可以看到光标已绘制，但光标的“热点”不在光标的中心。

在firefox中，这个工作没有问题，我仍然可以看到相同的光标，并且光标的“热点”位于我想要的中心位置。

任何想法我在这里做错了，我该如何修复它的铬？标准十字线光标在铬中工作正常（因为它的“热点”位置正确），但它并不完全符合我的目的。

你可以看到自己here，只需将光标移到chrome和firefox的左上角即可看到区别。

答

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

我第一次尝试使用空白光标，但随后Chrome将其渲染为黑色方块..因此我决定将目标作为画布的一部分并使用热点为0,0的光标并且是空白的除了0，0与目标具有相同颜色的图块。

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

答

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

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

光标：URL（../光标/ scope.cur） -10px -10px，十字准线;

我在这里发现了一些东西：http://code.google.com/p/chromium/issues/detail?id=12244 – Lordalcol 2011-01-23 10:58:37

嗨Lorezo，感谢您的答复，本身没有“服务器端”如果我将文件更改为.png，我是不是会失去光标文件中的热点信息？ – theburningmonk 2011-01-23 11:02:46

答

我的回答可能是太晚现在但这应该在Chrome浏览器：

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

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

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

注：我相信MIME类型的问题已经解决。

答

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

创建一个名为.htaccess
写入一个文本文件，这个命令： AddType image/vnd.microsoft.icon .cur
保存在文件夹中/cursors或在任何父文件夹（通常是网站根目录/）

这应该适用于Apache服务器。

Here a post关于此解决方案。

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

相关推荐