正确的偏移计算，以便在鼠标悬停时显示弹出窗口

Correct offset calculation for displaying popup on mouseover

本文关键字：悬停 鼠标 显示 窗口 计算      更新时间：2023-09-26

我正在尝试在鼠标悬停时显示网格的弹出窗口。问题是，我如何显示每个网格从顶部和左侧定位的弹出中心。任何人都可以修改下面的代码来计算正确的偏移量（左和上），在下面的 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();
                });
        });
});

你为什么不这样尝试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;}

使用元素属性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();
                });
        });
});

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

相关文章：