圖片跟隨鼠標<div></div><div id="text_translate"><p>如何在特定的&lt;div&gt;中使圖片跟隨鼠標？</p><p> 我知道我可以從e.pageX &amp; e.pageY和代碼document.onmousemove = followmouse;獲得鼠標 position . Run the followmouse function every moment the mouse move in a page and in the followmouse function, set the picture position to the mouse position. 對於我在這里提出的確切問題（如何在特定的&lt;div&gt;中使圖片跟隨鼠標），我有這個想法：</p><p> 獲取我的 div <em>top</em> 、 <em>left</em> 、 <em>width</em>和<em>height</em>並做一些數學運算，如果鼠標 go 離開div ，設置圖片的visibility:hidden 。</p><p> 但是沒有任何簡單的方法可以做到這一點嗎？</p></div>

Question

如何在特定的<div>中使圖片跟隨鼠標？

我知道我可以從e.pageX & e.pageY和代碼document.onmousemove = followmouse;獲得鼠標 position . Run the followmouse function every moment the mouse move in a page and in the followmouse function, set the picture position to the mouse position. 對於我在這里提出的確切問題（如何在特定的<div>中使圖片跟隨鼠標），我有這個想法：

獲取我的 div top 、 left 、 width和height並做一些數學運算，如果鼠標 go 離開div ，設置圖片的visibility:hidden 。

但是沒有任何簡單的方法可以做到這一點嗎？

Answer 1

假設你有一些像這樣的HTML ，

<div id="mydiv" style="width: 300px; height: 300px;"></div>
<img id="myimg" style="position: absolute;" alt="" />

然后

document.getElementById("mydiv").onmousemove = function(e) {
    document.getElementById("myimg").style.top = e.pageY*1 + 5 + "px";
    document.getElementById("myimg").style.left = e.pageX*1 + 5 + "px";
}

僅當鼠標位於div上方時，才會將您的圖片移動到鼠標上。

Answer 2

只要圖片實際上包含在div中，並且相對於其正常的 position 移動它，那么我認為在包含的div上設置overflow:hidden應該可以工作。 當我說“設置”時，我並不是指每次鼠標移到外面，而是只在主CSS中移動一次。