Question

当我将鼠标悬停在图像地图上的热点上时，我很难让自定义光标工作。 Firefox显示它完美，但在悬停在图像映射上的Safari / Chrome中，自定义光标显示，除非将鼠标悬停在图像上的实际热点（区域标记）上，然后显示默认的“单击光标”。当我在图像映射中尝试了每个可能的选择器时，它让我疯狂。

以下是我使用的代码：

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

部分选择器未显示在顶部，但我添加它们只是为了确保我涵盖每种可能的情况。

我确信这纯粹是一个选择器问题，但我不确定要添加哪些选择器以使自定义光标无论是否为链接都是相同的。

Answer 1

试试这个，它使用javascript

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

Answer 2

据我所知，这似乎是Safari 5的一个问题，虽然我还没有在野外找到它。这不仅限于图像地图，我在标准＆lt; a＆gt;中遇到了同样的问题。标签。我正在使用与你自己相同的CSS方法。

Safari / IE图像映射自定义光标无法正常工作

2 个答案: