單擊圖像區域地圖時如何顯示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>