html, cannot do onhover for an image map areas - html

Question

I'm trying to apply a filter to an images map area, when it is hovered on. It displays the tooltip on the correct area, but nothing changes when I hover on it.I've tried to use z-index but that didn't help either.
html code:
<div>
<img src={imagesource} usemap="#image-map">
</img>
<map name="image-map">
<area id="area1" style={{backgroundColor:"black", zIndex:"3"}} target="_self" alt="siauliai" title="siauliai" href="" coords="2087,1394,1974,1821,1379,1890,1312,1760,1396,1540,1311,1445,1334,1383,1328,1355,1592,1349" shape="poly"/>
<area id="area2" target="_self" alt="panevezys" title="panevezys" href="" coords="2036,1844,2266,1911,2396,1715,2851,1703,2940,1585,2412,1327,2115,1411,2053,1535,2042,1636" shape="poly"/>
<area id="area3" target="_self" alt="utena" title="utena" href="" coords="2379,1748,2389,1850,2676,2158,2907,2181,2884,2007,3339,2046,3283,1788,2974,1619,2766,1726,2516,1729" shape="poly"/>
<area id="area4" target="_self" alt="vilnius" title="vilnius" href="" coords="3173,2975,2933,2601,3124,2269,3364,2064,2940,2021,2912,2212,2678,2212,2403,1887,2240,1972,2481,2339,2276,2686,2671,2657,2523,2827,2558,2961" shape="poly"/>
<area id="area5" target="_self" alt="alytus" title="alytus" href="" coords="1781,2660,2523,3197" shape="rect"/>
<area id="area6" target="_self" alt="marijamp" title="marijamp" href="" coords="1314,2184,1753,2198,1859,2601,1583,2827,1293,2693" shape="poly"/>
<area id="area7" target="_self" alt="Klaipeda" title="Klaipeda" href="" coords="671,1510,1074,1347,855,1651,1138,2174,473,2033" shape="poly"/>
<area id="area8" target="_self" alt="telsiai" title="telsiai" href="" coords="883,1663,989,1804,1322,1755,1371,1564,1307,1352,1201,1324,1124,1338,975,1515" shape="poly"/>
<area id="area9" target="_self" alt="taurage" title="taurage" href="" coords="1703,2073,1689,2137,1159,2172,1032,2002,1004,1826,1279,1762,1435,2024" shape="poly"/>
<area id="area10" target="_self" alt="kaunas" title="kaunas" href="" coords="1774,2146,1951,2641,2226,2549,2424,2330,2191,1913,1611,1870,1428,1899,1477,2012,1682,2033" shape="poly"/>
</map>
css code:
area{
display:block;
}
#area1:hover {
background:black;
opacity: 0.5;
}
#area2:hover {
background:black;
opacity: 0.5;
}
#area3:hover {
background:black;
opacity: 0.5;
}
#area4:hover {
background:black;
opacity: 0.5;
}
#area5:hover {
background:black;
opacity: 0.5;
}
#area6:hover {
opacity: 0.5;
background:black;
}
#area7:hover {
opacity: 0.5;
background:black;
}
#area8:hover {
opacity: 0.5;
opacity:0.2;
}

Answer 1

I don't know the solution. But I see you can just define area:hover single time instead of repeating it. Or give them a single class and then use .classname:hover. This way also, it only effects the area you hovered instead of effecting all.
Sorry I don't have the answer but this was a little productivity tip.