我正试图将过滤器应用于图像映射区域，当它悬停在。它在正确的区域显示工具提示，但是当我将鼠标悬停在它上面时，没有任何变化。我试过用z-index，但也没用。html代码:
<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代码:
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;
}
我不知道解决办法。但是我看到你可以只定义一次area:hover而不是重复它。或者给他们一个单独的班级，然后使用.classname:hover。这样，它只影响你悬停的区域，而不是影响所有区域。对不起，我没有答案，但这是一个提高效率的小技巧。