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

【问题标题】：How to show div and css content when clicking on a image area map单击图像区域图时如何显示 div 和 css 内容
【发布时间】：2018-04-16 09:14:13
【问题描述】：

我有这个问题，我试图在我点击的区域坐标位置显示 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>

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

这会在光标位置显示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;
}

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

【讨论】：