Question

有人可以告诉我如何在下面的jsfiddle中排列图像上方的标题，因为我似乎无法做到这一点。标题目前位于图像下方。提前谢谢。

<script type="text/javascript">
$(function(){
  $("ul.thumb li").hover(function() {
  $(this)
    .css('z-index', '10')
    .find('img').addClass("hover")
    .stop()
    .animate({
       marginTop: '-150px',
       marginLeft: '-150px',
       top: '50%',
       left: '50%',
       width: '300px',
       height: '300px',
       padding: '20px'

     }, 200, function() {

        var $this = $(this),
        h = $this.height();
        $caption = $('<div class="caption">' + this.title  + '</div>')
            .css('top', h.toString() + 'px');
            $this.after($caption);

      }); 

   }, function() {

 $('.caption').remove();
 $(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({

    marginTop: '0',
    marginLeft: '0',
    top: '0',
    left: '0',
    width: '200px',
    height: '200px',
    padding: '5px'

 }, 400);
});
});
</script>

我希望这会有所帮助

Answer 1

以下是更新的FIDDLE。

相关的是这一行：

.css('top', -h.toString() + 'px');

它定位文本的div，并改变图像上方的位置，我只是在h.toString（）前面放了一个负号。您可以通过将h.toString（）乘以类似-.8或-.92的系数来精细调整位置，以进行更精细的调整。将其置于图像上方可能会出现问题，因为您必须根据文本div的高度调整位置。

移动工具提示的标题

1 个答案: