如何在单击图像区域地图时显示div和css内容

Question

我有这个问题，我试图在我点击的区域坐标位置显示css / div。基本上我想在分配区域的位置上显示div。主要是点击并显示基于区域的信息点击

(function($) {
  $('.list-group area').on('click', function(e) {

    $('.' + this.id).toggleClass('show');
  });
})(jQuery);

.dropdowntest-content {
  position: absolute;
  display: none;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 10;
  top: 0;
  left: 0;
}

.show {
  display: block;
}

area {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<map class="list-group" name="map"> 
    <area id="section-1" class="list-group-item" shape="rect" coords="0,0,200,200" />
    <area id="section-2" class="list-group-item" shape="rect" coords="242,194,393,288" />
    <area id="section-2" class="list-group-item" shape="rect" coords="397,24,530,109" />
</map>

<img alt="Picture1" src="https://placehold.it/680x466" height="466" width="680" usemap="#map" data-cms="{'contentId':95875}" />

<div class="dropdowntest-content  section-1">
    <p>Hello world 1</p>
</div>
<div class="dropdowntest-content  section-2">
    <p>Hello world 2</p>
</div>
<div class="dropdowntest-content section-3">
    <p>Hello world 3</p>
</div>

Answer 1

这显示了光标位置上的NSData：

dropdowntest-content

(function($) {
  $('.list-group area').on('click', function(e) {
    $('.' + this.id).toggleClass('show').css({top: e.clientY, left: e.clientX });
  });
})(jQuery);

.dropdowntest-content {
  position: absolute;
  display: none;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 10;
  top: 0;
  left: 0;
}

.show {
  display: block;
}

area {
  cursor: pointer;
}