jQuery 팝업 이미지 (텍스트가있는 경우)

Question

실제로 스택에서 찾은이 코드가 있지만 가져 가면 팝업 이미지 아래에 텍스트를 추가하는 방법을 찾을 수 없습니다.

<style type="text/css"> 
     .popover1 {top: 10px; left: 10px; position: relative;} 
     .big_img1 {z-index: 999; height: 250px; position: absolute;} 
    </style> 

    <div id="hover-div"> 
     <img class="popover1" style="height: 100px;" src="http://transolid.com/assets/images/colors/previews/prev_sorrento_coast.jpg" /> 
    </div> 

<script> 
    $('.popover1').on({ 
     mousemove: function(e) { 
      $(this).next('img').css({ 
       top: e.pageY - 260, 
       left: e.pageX + -120 
      }); 
     }, 
     mouseenter: function() { 
      var big = $('<img />', {'class': 'big_img1', src: this.src}); 
      $(this).after(big); 
     }, 
     mouseleave: function() { 
      $('.big_img1').remove(); 
     } 
    }); 
</script> 

나는 팝업의 하단에 텍스트를 추가해야합니다

여기에 코드입니다. 이것을 할 수있는 방법이 있습니까?

감사

Answer 1

대신 자체적으로 이미지를 만드는, 당신은 당신의 이미지와 제목을 포장하는 사업부를 만들어야합니다. 사용해보기 :

<style type="text/css"> 
    .popover1 {top: 10px; left: 10px; position: relative;} 
    #big { z-index: 999; position:absolute; text-align:center; padding:2px; background-color:#fff; border:1px solid #999; } 
    #big img { height: 250px; } 
</style> 


<div id="hover-div"> 
    <img class="popover1" style="height: 100px;" src="http://transolid.com/assets/images/colors/previews/prev_sorrento_coast.jpg" title="some title text"/> 
</div> 


<script> 
    $('.popover1').on({ 
     mousemove: function(e) { 
      $(this).next('#big').css({ 
       top: e.pageY - 260 - 25, // height of image and title area plus some 
       left: e.pageX + -120 
      }); 
     }, 
     mouseenter: function() { 
      var $big = $('<img />', {'class': 'big_img1', src: this.src}), 
       $title = $('<div class="title"/>').html(this.title), 
       $frame = $('<div id="big" />'); 

      $frame.append($big).append($title); 

      $(this).after($frame); 
     }, 
     mouseleave: function() { 
      $('#big').remove(); 
     } 
    }); 
</script>