html - 图像映射区域上的自定义指针光标恢复为默认值

Question

我正在尝试更改特定元素中的光标。

改变

area {
    cursor: pointer;
}

到

area {
    cursor: url("http://fivebs.net/fiddle/cursor.ani"), pointer;
}

没用。但是，使用默认游标(等待、帮助等)是可行的:

area {
    cursor: url("http://fivebs.net/fiddle/cursor.gif"), help;
}

尝试修改全局光标参数、不同的容器、java 脚本、不同的 CSS 样式等。还查找了大多数以前的 stackoverflow 问题，并使用 jsfiddle 对其进行了测试(使用以前的谷歌搜索)。

HTML

<div>
    <map id="world" name="world">
        <area shape="circle" alt="Africa" title="Africa" coords="682,462,97" href="AllItems.aspx" target="_self" onmouseover="afr.style.visibility='visible'; afr.src='africa.png';" onmouseout="afr.style.visibility='hidden';" />
        <area shape="circle" alt="Americas" title="Americas" coords="228,198,123" href="AllItems.aspx" target="_self" onmouseover="ame.style.visibility='visible'; ame.src='americas.png';" onmouseout="ame.style.visibility='hidden';" />
        <area shape="circle" alt="Asia/Pacific" title="Asia/Pacific" coords="1110,412,122" href="AllItems.aspx" target="_self" onmouseover="asi.style.visibility='visible'; asi.src='asiapacific.png';" onmouseout="asi.style.visibility='hidden';" />
        <area shape="circle" alt="Europe" title="Europe" coords="627,136,98" href="AllItems.aspx" target="_self" onmouseover="eur.style.visibility='visible'; eur.src='europe.png';" onmouseout="eur.style.visibility='hidden';" />
    </map>
    <img alt="Africa" style="position:absolute;top:559px;left:779px;visibility:hidden;" id="afr" src="africa.png" />
    <img alt="Americas" style="position:absolute;top:321px;left:351px;visibility:hidden;" id="ame" src="americas.png" />
    <img alt="Asia/Pacific" style="position:absolute;top:534px;left:1232px;visibility:hidden;" id="asi" src="asiapacific.png" />
    <img alt="Europe" style="position:absolute;top:234px;left:725px;visibility:hidden;" id="eur" src="europe.png" />
    <img id="worldmap" alt="world map" src="http://fivebs.net/fiddle/worldmap.png" usemap="#world" />
</div>
<img alt="Ta Da" src="http://fivebs.net//fiddle/tada.png" />

CSS

#worldmap {
    position: relative;
    cursor: url("http://fivebs.net/fiddle/cursor.ani"), url("http://fivebs.net/fiddle/cursor.gif"), auto;
}
area {
    cursor: url("http://fivebs.net/fiddle/cursor.gif"), help;
}

最好能够在所述图像 map 上的悬停区域上使用自定义光标。

一直在测试这个 Jsfiddle:click here

更新

显然，标签在 DOM 之外，因此无法更改。有什么建议(除了使用 SVG 之外)吗？

Answer 1

看起来您的问题是您尝试用作自定义光标的文件的扩展名..

Can't use .ani cursor in css?