JQuery的鼠標移動的div類e.pageX定位

我使用這個代碼：JQuery的鼠標移動的div類e.pageX定位

$('.my_img').mousemove(function(e){ 
    $('.mycls').css("left",e.pageX-20+"px"); 
    $('.mycls').css("top",e.pageY-10+"px"); 

});

然後...

<div class="mycls">I Move</div>

然後...

<img class="my_img" src="myimg.png" />

我的問題是，如果我在這些div上方添加任何div，則位置發生變化，mycl不再處於鼠標位置。

所以，如果我身體這樣的後添加額外的div的：

<div>ONE</div> 

<div>TWO</div>

...那麼代碼的其餘部分......我會失去位置：O/

有關如何對此進行分類的任何想法？

來源

2012-06-26 Satch3000

由於您有CSS問題，所以很高興看到CSS代碼甚至演示。 –

現在沒有css了......只是頂部和左側的位置 – Satch3000

由於e.pageX和e.pageY值是相對於整個頁面，你的代碼不應該通過增加新的因素的影響。如果您將頂部和左側設置爲元素，它將定義頁面頂部和左側的距離。

它可能是有問題的唯一情況是，如果你有位置：相對集上mycls格的任何父元素。刪除位置：相對，這樣頂部和左側指的是整個頁面而不是父元素。

來源

2012-06-26 13:51:00 mzgajner

一個簡單的CSS position:absolute;添加到您的可動件.mycls

來源

2012-06-26 13:30:45

這仍然沒有立場。 e.pageX的一個替代方案，它與Div相關，而不是頁面，這可以創造奇蹟：o / – Satch3000

var img = document.getElementById("my_img"); 
 
var cls = document.getElementById("mycls"); 
 
img.onmousemove = function(e){ 
 
    cls.style.left = e.clientX-20 + "px"; 
 
    cls.style.top = e.clientY-10 + "px"; 
 
};

#mycls { 
 
    background-color: rgba(255,255,255,0.8); 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    font-family: sans-serif; 
 
    padding: 10px; 
 
    border-radius: 5px; 
 
    border: 1px solid rgba(0,0,0,0.8); 
 
} 
 
#my_img { 
 
    width: 420px; 
 
    height: 200px; 
 
    background-color: #333; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="my_img"> 
 
    <div id="mycls"> 
 
    Your message here 
 
    </div> 
 
</div>

這裏是我如何做到了這一點，在過去......重要正在移動的股利是容器的孩子的例子，使得它觸發任何鼠標移動事件冒泡到父級進行處理

來源

2017-03-27 20:59:51

JQuery的鼠標移動的div類e.pageX定位

回答

相關問題