轮廓效果已从地图区域中删除

如何解决轮廓效果已从地图区域中删除

如果在链接的图像上应用一些CSS规则，我会遇到删除地图区域轮廓的问题。

问题是我有2张图像，绝对在彼此的顶部，因此我可以隐藏可见性和不透明性，使我的图像居中并在单击时有一些过渡。 我为点击事件提供了一些纯JavaScript并管理了类更改，这些更改我不会在这里链接，因为即使从页面中删除脚本，我仍然有问题。

左：50％，变换：translateX -50％是我发现的唯一使绝对元素居中并保持响应能力的解决方案。

问题是，如果我使用以下规则，则轮廓将从地图区域消失

img [usemap] { 位置：绝对； 左：50％（这个可以留下，对轮廓没有任何影响） 变换：translateX（-50％） }

我什至试图在该区域设置永久轮廓，但这都不起作用

这是代码：

<div class="maps-container">   
    <div class="map-container"> 
    
        <img  data-map="map0" class="opacity1" src="images/cartemonde.PNG" usemap="#image-map">
         <map name="image-map">

            <area data-mapid="27" target="" alt="Amérique du Sud" title="Amérique du Sud" href="index.php/component/k2/itemlist/category/27-amerique-latine-caraibes" coords="151,243,174,239,185,254,197,250,203,260,211,272,229,270,255,271,273,280,288,292,307,298,317,303,313,324,304,338,291,352,274,366,261,379,390,246,402,245,413,252,424,237,427,419,228,394,371,234,339,328,219,312,212,214,286,202,177,262,158,257" shape="poly">
            <area data-mapid="21" target="" alt="Amérique du Nord" title="Amérique du Nord" href="index.php/component/k2/itemlist/category/21-amerique-du-nord" coords="145,126,111,108,187,97,172,85,159,69,141,51,139,42,147,29,153,15,17,145,8,131,18,119,12,103,22,91,33,53,90,62,95,75,93,92,115,157,102,171,100,175,89,96,208,101,113,200,122,180,178,191,155,205,161,209,221,218,220,130,135,247,143,259,267,166,269,183,240,196,215,235,237" shape="poly">
            <area data-mapid="9" target="" alt="Afrique" title="Afrique" href="index.php/component/k2/itemlist/category/9-afrique" coords="368,365,372,389,223,407,213,421,430,443,224,456,225,469,480,227,484,490,249,496,507,266,522,511,500,302,521,319,517,334,509,346,487,347,477,360,463,447,436,341,434,431,309,426,294,406,281,386,289,376,370,273" shape="poly">
            <area data-mapid="33" target="" alt="Europe" title="Europe" href="index.php/component/k2/itemlist/category/33-europe-du-nord" coords="484,210,471,462,204,452,199,442,440,428,194,410,198,404,206,384,383,391,398,193,396,375,380,150,146,392,144,414,163,429,448,420,416,134,425,438,104,449,88,466,84,492,124,151,505,497,486,208" shape="poly">
            <area data-mapid="2" target="" alt="Asie" title="Asie" href="index.php/component/k2/itemlist/category/2-afrique-du-nord-moyen-orient" coords="499,518,542,568,83,582,73,622,47,648,37,672,46,677,64,707,71,722,81,756,77,782,821,835,842,814,791,156,775,169,764,763,137,741,727,735,738,723,711,222,689,673,244,659,265,279,631,263,617,599,258,589,275,575,552,536,526,514,264,251,489,186,498,143" shape="poly">
            <area data-mapid="0" target="" alt="Océanie" title="Océanie" href="#" coords="619,625,647,665,683,321,675,666,343,362,687,364,703,368,378,740,387,746,758,765,354,759,745,323,750,757,296,714,290,702,698,693,685,664,656,285,288" shape="poly">
        </map>
    </div>

    <div class="map-container">

        <img  data-map="map21" class="opacity0 hidden" src="images/cartemonde-an.png"  usemap="#image-map2">

        <map name="image-map2">
            <area data-mapid="previous" target="" alt="previous" title="previous" href="#" coords="497,38,2" shape="rect">
            <area data-mapid="" target="" alt="Alaska" title="Alaska" href="#" coords="107,116,39,230,58,233,152,176,128,148,109,138,107,127" shape="poly">
            <area data-mapid="" target="" alt="Canada" title="Canada" href="#" coords="670,605,268,562,506,350,337,167,61,385,423,460,66,501,65,532,49,566,530,598,614,613,619,654,670,700,744,716,263" shape="poly">
            <area data-mapid="" target="" alt="" title="USA" href="" coords="354,601,640,636,327,586,399,401,382,363,344,306" shape="poly">
        </map>
    </div>
    <img  data-map="fake" class="map-fake" src="images/cartemonde.PNG">
</div>

和CSS：

img[usemap] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translate3d(0,0)
}
#maploc-target-container {
  width: 100%;
}
.map-fake {
  visibility: hidden;
  margin: 0 auto;
}
.maps-container{ 
  width: 100%;
}
.map-container{
  position: relative;
}
.hidden {
  visibility: hidden;
}
.opacity0 {
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}
.opacity1 {
  opacity: 1;
  transition: opacity 0.7s ease-in-out;
}