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对其进行了测试（使用之前的google搜索）。

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

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

曾经测试过这个Jsfiddle：click here

更新

显然，标签在DOM之外，并且不能更改。有什么建议（除了使用SVG）？

Answer 1

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

Can't use .ani cursor in css?

图像地图区域上的自定义指针光标恢复为默认值

1 个答案: