单击图像区域地图时如何显示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

这显示了光标位置上的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>