html - 图像地图区域上的自定义指针光标恢复为默认值
问题描述
我正在尝试更改特定元素中的光标。
改变
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:点击这里
更新
显然标签在 DOM 之外,因此无法更改。有什么建议(除了使用 SVG)吗?
解决方案
看起来您的问题是您尝试用作自定义光标的文件的扩展名..
推荐阅读
- oracle - 警告:使用编译错误创建触发器
- angular - ngOnDestroy 中的 RxJS“取消订阅”方法没有足够快地处理资源
- java - 如何确定一个数字是否是二进制的并且只有一个正则表达式有偶数个零?
- google-sheets - Query formula not displaying results that start with (') leading apostrophe strings
- java - 不可转换类型:android.view.View 到 androidtutorial.project.nightclock.Classes.TextClock
- amazon-quicksight - QuickSight 字符串到月份名称
- java - 列表
JUnit - php - 使用正则表达式在 ldap 的答案中提取一个值
- drupal - Robotstxt 显示服务不可用
- r - 使用线性模型进行 R 时间序列预测