Наведите курсор на поли, чтобы показать дополнительный div на карте

Question

пытается показать div # status-lokal1 после наведения на карту poly # 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