悬停地图poly在地图上显示额外的div

Question

试图在悬停在地图poly＃lokal1之后显示div＃status-lokal1我正在寻找仅使用CSS的解决方案。无法触发Div是可见的。

#status-lokal1 {display:none; position: relative;}
#lokal1:hover  #status-lokal1 {display:block !important; position:relative; bottom:5rem; right:0; z-index:999999}

     <div  data-mh="mappa" class="baner-inwestycje mh2">
    <div class="row expanded"> 
        <div class="sop1" >  
            <img src="img/inwestycje-budowlane/new-forest-boleslawice/plan/new-forest-plan-osiedla-slupsk.jpg" id="map-height"/> 
            <img src="img/inwestycje-budowlane/new-forest-boleslawice/plan/new-forest-plan-osiedla-slupsk_0019_Warstwa-1.png" class="auf"> 
            <img  data-mh="mappa" src="img/inwestycje-budowlane/new-forest-boleslawice/plan/empty.png" class="auf-empty mh2" alt="" usemap="#map" id="map-img"> 
        </div>
              <div id="status-lokal1"><h3>sprzedane</h3></div>
      <map name="map" id="location-map4" class="show-for-landscape">
        <area shape="poly" data-open="lokal1" id="lokal1" coords="" href="#" alt="">
      </map>
    </div>
  </div>

Answer 1

解决方案是不使用<map>元素，而是使用CSS将元素定位在图像中感兴趣的区域上。这样，您可以使用一个不错的语义，可访问的列表(<ul>(。

这是一些解释该技术的文章：

• http://www.frankmanno.com/ideas/css-imagemap/
• http://www.frankmanno.com/ideas/css-imagemap-redux/
• http://www.cssplay.co.uk/articles/imagemap/
• http://www.cssplay.co.uk/menu/solar_map
• https://alistapart.com/article/imagemap