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; 
} 

一些选择的是不显示在顶部,但我说他们只是为了确保我盖每种可能的情况。

我确定这纯粹是一个选择器问题,但我不确定要添加哪些选择器以使自定义光标相同,而不管它是否为链接。

+0

感谢您的反馈。我最初的选择是使用拖动鼠标光标的div,但它不是一个非常稳定的解决方案。我已经运行了另外两个JS脚本,并发现使用此选项时脚本滞后。这应该能够用CSS完成。 – mauzilla

从我可以告诉,这似乎是与Safari 5的一个问题,虽然我还没有发现在野外多引用它。这不仅限于图像映射,我与标准<a>标签有同样的问题。我使用与您自己相同的CSS方法。