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>）。

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

悬停地图多边形以在地图上显示额外的div

1 个答案: