應用光標的CSS區地圖

我有一個HTML地圖應用光標的CSS區地圖

#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時正確還原，但光標不按預期方式懸停在區域上時更改。當光標位於地圖圈上時，我應該提及哪些元素來更改光標？

來源

2015-11-17 Jason Stallard

你可以分享演示鏈接？ –

我創建了http://jsfiddle.net/FiveBs/5w5jfxgz/，但由於公司安全設置而看不到結果。 –

這裏光標在整個頁面中是否一樣？我沒有得到，PLZ解釋 –

因爲你<area>元素具有href屬性的遊標auto行爲是一個pointer。如果你想要默認的鼠標光標，你需要改變你的CSS。

area { 
    cursor: default; 
}

Here is your JSFiddle updated with this change

其它CSS光標選項，可以發現listed at MDN

來源

2015-11-20 11:59:22

我的小提琴和你的小提琴都不在EI11上，所以我決定檢查一下Chrome46，它們都工作：s –

我想要指針，但是它不適用於IE11。我正在給西蒙 - 韋斯特答覆，因爲他的小提琴使我意識到了我的問題的瀏覽器特定性質。 –

在對[此相關問題]（http://stackoverflow.com/questions/6589768/cursor-not-changing-to-pointer-in-usemap-area-case）的回答中，一位用戶聲明IE不支持更改區域標記上的遊標。他沒有提供資料來源，我一直在努力尋找任何可以鏈接到「證明」的文件。如果我找到任何東西，我會更新答案，以包含IE特有的行爲。 –

你可以這樣做：

CSS

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

來源

2015-11-20 10:41:07