Question

当用户将鼠标悬停在映射图像上的区域时，隐藏的div会显示。但我需要将隐藏的div放在鼠标旁边。它目前与鼠标保持一定距离，这个距离取决于浏览器窗口的大小。

jquery的：

$(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 的元素时，这些值是距第一个父元素的距离有位置：亲戚。

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

从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"
    });
});

Answer 2

原来如此！最后问题是我在页面上居中的固定宽度div内的div上运行了jquery。

为了解决这个问题，我基本上检测到了html文档宽度，减去了div的固定宽度，然后将余数除以2，得到了我需要偏移鼠标计算的左边距以获得隐藏无论窗口大小是什么，div都会在鼠标旁边弹出。

网站的标题也是一个固定的大小，所以我从鼠标位置减去它的高度，使隐藏到div以正确定位在另一个轴上。

最后的小提琴：http://jsfiddle.net/3kWq7/10/ 最终结果：http://jsfiddle.net/3kWq7/10/embedded/result/ 最后的jquery：

$(document).ready(function(){
    $(".hover_link").mousemove(function(e){         
        $($(this).attr('rel')).show();
        var padding = parseInt(jQuery("#page").css("margin-right"));
        var margin = $(document).width() - 900;
        var marginleft = margin / 2;        
            $(".box").css({             
            top: (e.pageY - 200) + "px",             
            left: (e.pageX - marginleft + 10) + "px"        
        });    
    });     
    $(".hover_link").mouseout(function(e){         
        $($(this).attr('rel')).hide();   
    });
});

感谢所有帮助过的人！

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

2 个答案: