0

当用户将鼠标悬停在映射图像上的区域上时，隐藏的 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();     
    });
});
4

2 回答 2

1

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

您的.singular .hentry的 CSS设置位置：相对于您的 div 所在的文章元素。因此，当您设置top:50px时，这意味着它应该距离该文章元素的顶部 50px，而不是距离页面顶部的 50px。

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

编辑：另外，你不应该从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"
    });
});
于 2012-06-26T12:43:51.670 回答
0

所以！最后的问题是我让 jquery 在页面上居中的固定宽度 div 内的 div 上运行。

为了解决这个问题，我基本上检测到了 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();   
    });
});

感谢所有帮助过的人！

于 2012-06-27T10:51:51.270 回答