将光标css应用于区域地图

Question

我有一个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上时会正确恢复，但当光标悬停在区域形状上时不会如预期那样发生变化。当光标位于地图圆圈上方时，我应该参考什么元素来更改光标？

Answer 1

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

area {
    cursor: default;
}

这是你的JSFiddle更新了这个变化

其他CSS光标选项可以在MDN 中找到

Answer 2

您可以执行以下操作：

CSS

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