div를 특정 요소에 연결하여 자바 스크립트로 표시

Question

이미지를 클릭하면 해당 div (jQuery의 .show())가 표시됩니다.

하지만 어떻게 이미지에 div를 첨부 할 수 있습니까? 그것은 순수한 CSS 또는 자바 스크립트로 완료됩니까?
여러 개의 "위치 : 절대"를 시도했지만 이미지 근처에 부착 할 수 없습니다.

어떻게해야합니까?

Answer 1

매우 간단합니다. 클릭 한 이미지의 .position().top 및 .position().left을 기반으로 계산 된 밑줄이 채워지도록 .css({top:___,left:___})을 계산해야합니다. 이 같은

Answer 2

뭔가 :

 $(document).ready(function() { 
     $('#someim').click(function() { 
      showDiv($(this), $('#somediv')); 
     }); 
    }); 
    function showDiv(sender, object) { 

     var pos = $(sender).offset(); 
     var width = $(sender).width(); 

     $(object).css({ "left": (pos.left + width) + "px", "top": pos.top + "px" }); 

     $(object).show(); 
    } 
    <img id="someim" width="250" height="61" alt="Stack Overflow" src="http://sstatic.net/so/img/logo.png"> 
    <div id="somediv" style="display:none; margin-left:10px; color:Red">sd</div>