jquery div位於鼠標移動旁邊，取決於瀏覽器窗口大小

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

所以！最後問題是我的jquery在div上運行，該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(); 
    }); 
}); 

感謝所有誰幫助！

Answer 2

當您設置頂和離開親屬於位置的元素：絕對，這些值是距第一個具有位置的父元素的距離：相對。

你的CSS .singular .hentry套位置：相對裏面，你的DIV是文章的元素。因此，當您設置top：50px時，這意味着它應該距離該文章元素的頂部50px，而不是頁面頂部的50px。

要麼從文章元素中刪除位置：相對，要麼計算div的座標，以便它們與文章元素相關，而不是整個頁面。

編輯：另外，你不應該從e.pageX和e.pageY減去div的尺寸。 頂部和左值指定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" 
    }); 
});