Question

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

代码：

$(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;}

Answer 2

使用元素属性offsetLeft, offsetTop和offsetWidth, offsetHeight。

$(document).ready(function(){
    $("ul.listing li").each(function(i){
        $(this).hover(function() {
            var offsetleft = this.offsetLeft;
            var offsettop = this.offsetTop;
            $(".popupContainer").hide();
            $(".popupContainer").fadeIn(200).html($(this).html()).css({'left': offsetleft - this.offsetWidth/2, 'top': offsettop -this.offsetHeight*1.3});
            $(".popupContainer").hover(function(){
                  $(".popupContainer").show();  
                }, function(){
                  $(".popupContainer").hide();
                });
                }, function() {
                    $(".popupContainer").hide();
                });
        });
});

还添加一些像素以正确对齐。

用于在鼠标悬停时显示弹出窗口的正确偏移计算

2 个答案: