当我将鼠标悬停在图像 map 上的热点上时,我很难让我的自定义光标正常工作。 Firefox 完美显示它,但在 Safari/Chrome 中,当将鼠标悬停在图像 map 上时,自定义光标会显示,除非您将鼠标悬停在图像上的实际热点(区域标签)上,然后它会显示默认的“点击光标”。这让我发疯,因为我已经尝试了图像映射中的每一个可能的选择器。
这是我使用的代码:
<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;
}
一些选择器没有显示在顶部,但我添加它们只是为了确保涵盖每种可能的情况。
我确信这纯粹是一个选择器问题,但我不确定要添加哪些选择器才能使自定义光标保持不变,无论它是否为链接。
最佳答案
试试这个,它使用 javascript
http://www.ajaxblender.com/howto-create-custom-image-cursors.html
关于html - Safari/IE 图像映射自定义光标无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8118640/