一个图像上的悬停效果上的多个 CSS

Question

我有一个包含多个坐标的图像地图，我希望每个部分都有悬停效果。效果应该只出现在当前悬停的部分，其他部分应该保持正常

图片地图：

 <!-- Calculations based on an original image (width,height)=(3106,2071) -->
<img src="http://imagemap-generator.dariodomi.de/uploads/160410_151558_5a93c70d827455Ae.jpg" alt="" usemap="#Map" style="height: 715px; width: 1075px;">
<map name="Map" id="Map">
    <area alt="" title="" href="http://www.google.com" shape="poly" coords="382,37,522,37,589,157,521,276,382,278,313,158">
    <area alt="" title="" href="http://www.facebook.com" shape="poly" coords="171,158,309,160,379,279,311,399,170,398,101,279">
    <area alt="" title="" href="http://www.example.com" shape="poly" coords="315,400,380,281,517,283,590,401,520,520,384,521">
    <area alt="" title="" href="http://www.mail.google.com" shape="poly" coords="524,521,593,405,729,404,801,522,732,644,592,641">
    <area alt="" title="" href="http://www.random.com" shape="poly" coords="737,397,801,281,943,281,1013,400,945,521,803,520">
    <area alt="" title="" href="http://www.ebay.com" shape="poly" coords="525,277,595,159,731,158,800,277,733,396,592,398">
    <area alt="" title="" href="http://www.instagram.com" shape="poly" coords="735,157,803,37,941,37,1011,156,943,276,804,276">
</map>

悬停效果：

 img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

Answer 1

我不认为你可以用地图区域做到这一点，但你可以用 svg 做到这一点：

<svg  id="Map" style="height: 715px; width: 1075px;">
   <a xlink:href="http://www.google.com"><polygon points="382,37,522,37,589,157,521,276,382,278,313,158"/></a>
   <a xlink:href="http://www.facebook.com"><polygon points="171,158,309,160,379,279,311,399,170,398,101,279"/></a>
   <a xlink:href="http://www.example.com"><polygon points="315,400,380,281,517,283,590,401,520,520,384,521"/></a>
   <a xlink:href="http://www.mail.google.com"><polygon points="524,521,593,405,729,404,801,522,732,644,592,641"/></a>
   <a xlink:href="http://www.random.com"><polygon points="737,397,801,281,943,281,1013,400,945,521,803,520"/></a>
   <a xlink:href="http://www.ebay.com"><polygon points="525,277,595,159,731,158,800,277,733,396,592,398"/></a>
   <a xlink:href="http://www.instagram.com"><polygon points="735,157,803,37,941,37,1011,156,943,276,804,276"/></a>
</svg> 

和css：

svg#Map {background:url(http://imagemap-generator.dariodomi.de/uploads/160410_151558_5a93c70d827455Ae.jpg); 
background-size:cover;
}

#Map polygon {fill:rgba(0,0,0,0)}
#Map polygon:hover {
 fill:rgba(0,0,0,0.3)
}

看到这个小提琴：https://jsfiddle.net/grassog/akgs3zyt/