区域蓝色概述HTML标记？

Question

我正在研究HTML热点，并且对我在之前的Stack Overflow Q＆amp; A上找到的示例有疑问。

Previous Stack OverFlow Area Example

在'Gibberish'的第一个答案中，他提供了一个关于JSFiddle的实例。 JSFiddle Example from Gibberish

function hovIn() {
  var areaID = $(this).attr('id');
  //alert('['+areaID+']');
  if (areaID == 'CUST_1') {
    $('#myDiv').show();
  }
}

function hovOut() {
  $('#myDiv').hide();
}

$('map area').hover(hovIn, hovOut);

#num_cust1 {
  padding: 10px;
  background-color: yellow;
  position: absolute;
  top: 60px;
  left: 180px;
}

#num_cust2 {
  padding: 10px;
  background-color: yellow;
  position: absolute;
  top: 60px;
  left: 40px;
}

#num_cust3 {
  padding: 10px;
  background-color: yellow;
  position: absolute;
  top: 160px;
  left: 180px;
}

#myDiv {
  display: none;
  width: 50%;
  height: 50px;
  padding: 10px;
  background-color: skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Instructions: Mouse over computer's monitor to see hidden DIV
<!--<img src="http://www.proprofs.com/quiz-school/upload/yuiupload/2014513384.jpg" width="400" height="400" />-->
<div id="imagemap">
  <img src="http://img716.imageshack.us/img716/8287/3ylp.jpg" width="275" height="207" usemap="#Map" border="0" />
  <map name="Map">
        <area shape="poly" coords="105,26,107,126,257,140,256,27" href="#" id="CUST_1" name="CUST:1" />
        <area shape="poly" coords="10,21,14,178,71,184,69,19" href="#" id="CUST_2" name="CUST:2" />
        <area shape="poly" coords="113,145,94,172,241,192,251,164,250,164" href="#" id="CUST_3" name="CUST:3" />
    </map>
  <p>
    <div id="myDiv">This DIV hidden unless hover over the computer's monitor</div>
  </p>
</div>
<!-- Yellow DIV ID numbers overlaid on top of computer components -->
<div id="num_cust1">1</div>
<div id="num_cust2">2</div>
<div id="num_cust3">3</div>

我理解大多数答案是如何工作的，如果我点击三个定义的多边形区域中的任何一个，它们会被蓝色轮廓突出显示 - 但我看不到导致这种情况发生的代码（例如点击事件） ）。任何人都可以解释为什么他们出现蓝色没有任何代码（我可以看到）？

显示蓝色点击区域的小提琴输出的屏幕抓取：

Answer 1

这是浏览器处理点击地图区域的方式，您会看到如果您在Internet Explorer中尝试点击，您将获得一条虚线。在Chrome中，您将收到一个蓝色轮廓，而在FireFox中，您将无法获得一个！

它的处理类似于按钮。

以下CSS将删除大纲：

map area{
    outline: none;
}

Answer 2

map 标记用于定义客户端图像映射。图像映射是具有可点击区域的图像。

地图元素的必需名称属性与 img的 usemap属性相关联，并在图片和地图之间创建关系。

地图元素包含许多区域元素，用于定义图像映射中的可点击区域。

隐藏你可以做的大纲

＆＃13;

＆＃13;

map area {
  outline: none;
}

＆＃13;

<map name="primary">
  <area shape="circle" coords="75,75,75" href="#">
  <area shape="circle" coords="275,75,75" href="#">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">

＆＃13;

＆＃13;

＆＃13;

使用outine css属性，您可以在地图区域执行大量操作。例如，您希望将颜色从blue更改为red即可

＆＃13;

＆＃13;

map area{
outline-color: red;
}

＆＃13;

<map name="primary">
  <area shape="circle" coords="75,75,75" href="#">
  <area shape="circle" coords="275,75,75" href="#">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">

＆＃13;

＆＃13;

＆＃13;

Answer 3

这可以通过

解决

outline:none;