如何使用css定位html区域地图

Question

我想用CSS隐藏这个区域地图。如何在不添加额外元素的情况下完成它？

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Answer 1

您可以单独使用指针事件（Firefox不采用地图或区域标签上的显示规则）

/* use the selector of your needs : 
img[usemap] or img[usemap="#planetmap"]
*/
img {
  pointer-events:none;
  }

<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<h1>map is disabled</h1>
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Answer 2

附加CSS atribute display，将其设置为none，并将其内联在标记map:中

<map name="planetmap" style="display:none;">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

或者通过样式表来完成，下面是一个可以使用的选择器示例：

map{
display:none;
}

编辑：如果您想针对特定的name:

map[name=planetmap] {    
display:none;
}