Safari/IE圖像地圖自定義光標無法正常工作

我正努力讓自定義光標在圖像地圖上的熱點上懸停時工作。 Firefox完美地顯示它，但在Safari/Chrome中懸停在圖像映射上時，自定義光標會顯示，除非將鼠標懸停在圖像上的實際熱點（區域標記）上，則會顯示默認的「點擊光標」。這讓我瘋狂，因爲我已經嘗試了圖像映射中的每個可能的選擇器。Safari/IE圖像地圖自定義光標無法正常工作

這裏是我使用的代碼：

<map name="gameImg" id="gameImg"> 
        <area shape="rect" coords="299,4,358,64" class="gameElement" href="#" id="sailingBoat" name="0" /> 
        <area shape="rect" coords="365,43,505,161" class="gameElement" href="#" id="cruiseShip" name="1" /> 
</map>

而CSS：

#gameScreen, #gameScreen .wrapper, #gameScreen .wrapper a, #gameScreen .wrapper a:hover, #gameScreen area, #gameScreen area a, #gameScreen area a:hover, #gameScreen img, #gameScreen img a, #gameScreen img a:hover, #gameImg, #gameImg a, #gameImg a:hover, .gameElement, .gameElement a, .gameElement a:hover, #gameScreen map a, #gameScreen map a:hover, #gameScreen:hover, #gameImg:hover { 
cursor: url(cursor.cur), url(images/cursor.cur), default; 
}

一些選擇的是不顯示在頂部，但我說他們只是爲了確保我蓋每種可能的情況。

我確定這純粹是一個選擇器問題，但我不確定要添加哪些選擇器以使自定義光標相同，而不管它是否爲鏈接。

來源

2011-11-14 mauzilla

試試這個，它使用JavaScript

http://www.ajaxblender.com/howto-create-custom-image-cursors.html

來源

2011-11-14 09:06:26

感謝您的反饋。我最初的選擇是使用拖動鼠標光標的div，但它不是一個非常穩定的解決方案。我已經運行了另外兩個JS腳本，並發現使用此選項時腳本滯後。這應該能夠用CSS完成。 – mauzilla

從我可以告訴，這似乎是與Safari 5的一個問題，雖然我還沒有發現在野外多引用它。這不僅限於圖像映射，我與標準<a>標籤有同樣的問題。我使用與您自己相同的CSS方法。

來源

2011-12-07 01:07:14 001GZ

Safari/IE圖像地圖自定義光標無法正常工作

回答

相關問題