複数のCSSが1つの画像上のホバー効果に適用されます

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/