位于鼠标旁边的 jquery div 根据浏览器窗口大小移动

Question

当用户将鼠标悬停在映射图像上的区域上时，隐藏的 div 会自行显示。但我需要将隐藏的 div 放置在鼠标旁边。它当前将自己定位在距鼠标一定距离的位置，该距离因浏览器窗口的大小而异。

j查询:

$(document).ready(function(){
    $(".hover_link").mousemove(function(e){         
        $("#box1").show();         
        $(".box").css({             
            top: (e.pageY - 240) + "px",             
            left: (e.pageX - 90) + "px"        
        });    
    });     
    $(".hover_link").mouseout(function(e){         
        $("#box1").hide();     
    });
});

CSS:

.hover_link{
    display:block;
}
.box{
    float: left;
    vertical-align: top;
    display:none;
    height: 80px;
    width: 250px;
    background-color: #FFF;
    position: absolute;
    z-index: 1000;
    padding:10px 10px 10px 0;
    }
    .boxinner{
    text-align:left;
    max-width:140px;
    padding-left:10px;
    height:80px;
    float:left;
    vertical-align:top;
    }

HTML:

<img src="http://www.poltairhomes.com/images/swmap.jpg" width="900" height="642" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area class="hover_link" shape="circle" coords="574,143,10" href="http://www.poltairhomes.com/trecerus-farm" />
</map>
<div class="box" id="box1" align="center">
    <div class="boxinner">
        <img src="http://www.poltairhomes.com/images/homethumb1.png" width="80px" height="80px" />
    </div>
    <div class="boxinner">Trecerus Farm Development: 22 Two, Three &amp; Four bed homes.
    </div>
</div>

网站:http://www.poltairhomes.com/developments/

非常感谢。

编辑:我现在已将我的 jquery 更新为以下内容，但现在隐藏的 div 根本不显示:

$(document).ready(function(){
    $(".hover_link").mousemove(function(e){         
        $("#box1").show();         
        $(".box").css({             
            top: ((e.pageY - $("#main").offest().left) + 10) + "px",             
            left: ((e.pageX - $("#main").offset().top) + 10) + "px"        
        });    
    });     
    $(".hover_link").mouseout(function(e){         
        $("#box1").hide();     
    });
});

编辑 2: jquery 现在如下所示，但同样，隐藏的 div 似乎没有显示:

$(document).ready(function(){
    $(".hover_link").mousemove(function(e){         
        $("#box1").show();
            var main = $("#main");
            var offset = main.offset();
            var mouseY = (e.pageY - main.offset.left); 
            var mouseX = (e.pageX - main.offset.top);        
            $(".box").css({             
                top: (mouseY + 10) + "px",             
                left: (mouseX + 10) + "px"        
            });    
        });     
    $(".hover_link").mouseout(function(e){         
        $("#box1").hide();     
    });
});

Answer 1

当您将 top 和 left 属性设置为具有 position:absolute 的元素时，这些值是与第一个父元素的距离有position:relative。

.singular .hentry 的 CSS 将 position:relative 设置为您的 div 所在的文章元素。因此，当您设置 top:50px 时，这意味着它应该距该文章元素的顶部 50 像素，而不是距页面顶部 50 像素。

从 article 元素中删除 position:relative 或计算 div 的坐标，使它们相对于 article 元素而不是整个页面。

编辑:此外，您不应从 e.pageX 和 e.pageY 中减去 div 的尺寸。 top 和 left 值指定 div 左上角的起始位置。您可以将 5px 添加到两个值，使其显示在光标旁边。

EDIT2:这对我有用:

$(".hover_link").mouseover(function(e) {
    $("#box1").show();
    var offset = $('#mapwrapper').offset();
    $(".box").css({
      top: (e.pageY - offset.top + 10) + "px",
      left: (e.pageX - offset.left + 10) + "px"
    });
});