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

您需要创建一个div来包装图像和标题，而不是单独创建图像。试试这个：

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

悬停文本时的jQuery弹出图像

1 个答案: