javascript - 鼠标悬停时显示弹出窗口的正确偏移计算

Question

我正在尝试在鼠标悬停时显示网格的弹出窗口。问题是，如何为每个网格显示从顶部和左侧定位的弹出中心。任何人都可以修改下面的代码来计算正确的偏移量(左和上)，在下面的 plunker 代码中，它没有按预期显示结果。感谢您的帮助。

PLUNKER URL

代码:

$(document).ready(function(){
  $("ul.listing li").each(function(i){
            var offset = $(this).offset();
            console.log("index->" +i + "<-index " +"left - "+ offset.left+ "<br/> top - "+offset.top);
                $(this).hover(function() {
                    $(".popupContainer").hide();
                    $(".popupContainer").fadeIn(200).html($(this).html()).css({'left': offset.left/3, 'top': offset.top});
                    $(".popupContainer").hover(function(){
                        $(".popupContainer").show();    
                    }, function(){
                        $(".popupContainer").hide();
                    });
                }, function() {
                    $(".popupContainer").hide();
                });
        });
});

Answer 1

你为什么不这样试试 https://plnkr.co/edit/a9zkLP?p=preview

js:

$(document).ready(function(){
    $("ul.listing li").each(function(i){
        var pop = $('<div class="popupContainer"></div>').html($(this).html());
        $(this).append(pop);
    })
});

CSS:

ul.listing li{
  position: relative;
}

.popupContainer{
    position: absolute;
    transform:translate(-50%,-50%);
    top:0;
    left:0;
  }
  ul.listing li:hover .popupContainer{display: block;}