自定義光標在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的左上角即可看到區別。

來源

2011-01-23 theburningmonk

對於任何有興趣的人，我最終解決了這個問題，儘管它有點破解。

我第一次嘗試使用空白光標，但隨後Chrome將其渲染爲黑色方塊..因此我決定將目標作爲畫布的一部分並使用熱點爲0,0的光標並且是空白的除了0，0與目標具有相同顏色的圖塊。

一旦你開始遊戲，你可以看到結果here，這不是一個漂亮的解決方案，但仍然有效。

來源

2011-02-02 17:59:38 theburningmonk

我認爲這裏有兩個不同的問題。

第一（「資源解釋爲圖像但具有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，十字準線;

來源

2011-01-23 10:57:08 Lordalcol

我在這裏發現了一些東西：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類型的問題已經解決。

來源

2012-09-20 08:46:28 Gboyega

要解決「資源解讀爲圖像......」警告：

創建一個名爲.htaccess
寫入一個文本文件，這個命令： AddType image/vnd.microsoft.icon .cur
保存在文件夾中/cursors或在任何父文件夾（通常是網站根目錄/）

這應該適用於Apache服務器。

Here a post關於此解決方案。

來源

2013-06-02 00:51:58 Salvador

自定義光標在Chrome中無法正常工作

回答

相關問題