将光标 css 应用于区域地图答案

【问题标题】：Apply cursor css to area map将光标 css 应用于区域地图
【发布时间】：2016-02-18 19:06:40
【问题描述】：

我有一个 html 地图

#world {
  position: relative;
  cursor: url("http://cur.cursors-4u.net/cursors/images4/cur395.gif"), url("http://i50.tinypic.com/21b9fso.gif"), auto;
}
area {
  cursor: auto;
}

<div id="world">
  <map id="world">
    <area shape="circle" alt="Africa" title="Africa" coords="682,462,97" href="AllItems.aspx" target="_self" onmouseover="afr.style.visibility='visible'; afr.src='http://irvingglobalstudies.wikispaces.com/file/view/Africa.png/174406561/284x300/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='https://www.walmartethics.com/images/landingpagemap/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='http://www.awlgrip.com/PublishingImages/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='http://scrubs.co.uk/_img/map-europe.png';" onmouseout="eur.style.visibility='hidden';" />
  </map>
  <img alt="Africa" style="position:absolute;top:559px;left:779px;visibility:hidden;" id="afr" src="http://irvingglobalstudies.wikispaces.com/file/view/Africa.png/174406561/284x300/Africa.png" />
  <img alt="Americas" style="position:absolute;top:321px;left:351px;visibility:hidden;" id="ame" src="https://www.walmartethics.com/images/landingpagemap/americas.png" />
  <img alt="Asia/Pacific" style="position:absolute;top:534px;left:1232px;visibility:hidden;" id="asi" src="http://www.awlgrip.com/PublishingImages/AsiaPacific.png" />
  <img alt="Europe" style="position:absolute;top:234px;left:725px;visibility:hidden;" id="eur" src="http://scrubs.co.uk/_img/map-europe.png" />
  <img alt="world map" src="https://upload.wikimedia.org/wikipedia/commons/f/fc/No_colonies_blank_world_map.png" usemap="#world" />
</div>
<img alt="Ta Da" src="http://i3.kym-cdn.com/entries/icons/original/000/008/119/1353379_700b.png" />

光标在地图上时是正确的，在 tada.png 上时会正确还原，但在将鼠标悬停在区域形状上时光标不会按预期改变。当光标在地图圆圈上时，我应该参考什么元素来更改光标？

【问题讨论】：

可以分享演示链接吗？
我创建了jsfiddle.net/FiveBs/5w5jfxgz，但由于公司安全设置看不到结果。
这里的光标在整个页面中都一样吗？我没有得到，请解释一下
有两张图片；光标在世界地图上时是一架飞机，但在卡通女人上时恢复为自动。地图上有几个圆圈，当鼠标悬停在这些圆圈上时，光标没有按预期变化。光标也应该在那里恢复为自动。
Hye @jason Stallard，如果我没记错的话，你想要光标：区域地图上的飞机图标吗？

标签： html css

【解决方案1】：

因为您的<area> 元素具有href 属性，所以光标的auto 行为是pointer。如果您想要默认鼠标光标，则需要将 CSS 更改为。

area {
    cursor: default;
}

Here is your JSFiddle updated with this change

其他 CSS 光标选项可以找到listed at MDN

【讨论】：

我的小提琴和你的小提琴都没有在 EI11 上工作，所以我决定检查 Chrome46，它们都可以工作：s
我想要指针，但它在 IE11 上不起作用。我将答案打勾给@Simon-West，因为他的小提琴让我意识到我的问题的浏览器特定性质。
在对this related question 的回答中，一位用户表示 IE 不支持更改区域标签上的光标。他没有提供来源，我一直在努力寻找可以链接到“证明”它的任何文档。如果我发现任何东西，我会更新答案以包含 IE 的特殊行为。

【解决方案2】：

你可以这样做：

CSS

.circle:hover
{
    cursor: url("http://cur.cursors-4u.net/cursors/images4/cur395.gif"), url("http://i50.tinypic.com/21b9fso.gif"), auto;
}

【讨论】：