Javascript jQuery鼠标位置
我有一个问题,jquery的鼠标悬停。我有一张带地图的图像。当我将鼠标悬停在特定区域时,div应该会在鼠标的位置弹出,而不是根据页面的滚动高度在某个位置弹出 这就是一切顺利的时候。 下一幅图显示了当我向上滚动一点时会发生什么。 悬停区域是相同的,但div不在正确的位置。我制定的代码如下:Javascript jQuery鼠标位置,javascript,jquery,html,Javascript,Jquery,Html,我有一个问题,jquery的鼠标悬停。我有一张带地图的图像。当我将鼠标悬停在特定区域时,div应该会在鼠标的位置弹出,而不是根据页面的滚动高度在某个位置弹出 这就是一切顺利的时候。 下一幅图显示了当我向上滚动一点时会发生什么。 悬停区域是相同的,但div不在正确的位置。我制定的代码如下: $(document).ready(function(){ $('area').mouseover(function(e){ var x =
$(document).ready(function(){
$('area').mouseover(function(e){
var x = e.clientX;
var y = e.clientY;
var id = $(this).attr("id");
$("div#map-popup-"+id).css({position: "absolute", top: y, left: x});
$("div#map-popup-"+id).show();
$(this).mouseleave(function(){
$("div#map-popup-"+id).hide();
});
});
});
我以前从未使用过地图和区域,所以我不知道会发生什么。我从网络档案中得到了一个简单的html,我需要在wordpress中恢复该网站。以下是html代码中的一个区域:
<img src="https://web.archive.org/web/20160307004818im_/http://dcca.eu/img/chambers_map_new.png" width="1000" height="507" alt="" usemap="#chambers-map" />
<map id="chambers-map" name="chambers-map">
<area id="ulm" shape="circle" coords="85,160,10" href="#" alt="" />
<area id="passau" shape="circle" coords="232,136,10" href="#" alt="" />
所以我的问题是:为什么会发生这种情况,我如何解决它?提前谢谢 鼠标光标的位置基于其在页面上的X和Y坐标。您正在查找
pageX
和pageY
:
所以你可能想
position:fixed
基于e.pageX
和e.pageY
的元素鼠标光标的位置基于其在页面上的X和Y坐标。您正在查找pageX
和pageY
:
所以你可能想
position:fixed
基于e.pageX
和e.pageY
的元素您希望弹出窗口的位置相对于视口而不是父元素。因此,使用“固定”位置而不是“绝对”位置。您希望弹出窗口的位置相对于视口,而不是相对于父元素。因此,使用位置作为“固定”而不是“绝对”