javascript - 将鼠标悬停在元素上时使图像跟随光标

Question

我想知道是否可以使用 JavaScript 创建一个 <a>悬停时会显示跟随鼠标位置的图像的元素。

我找到了很多悬停部分的解决方案，但我还没有找到任何可以跟随鼠标的解决方案。

换句话说，在悬停时，图像不跟随鼠标，而是在悬停时出现和消失，我如何修改我的代码以使其跟随鼠标？到目前为止，这是我尝试过的:

<a href="link.html" onmouseover="document.getElementById('hoverimage').style.display = 'block';" onmouseout="document.getElementById('hoverimage').style.display = 'none';">hoverlink</a>

<div style="display: none;" id="hoverimage">
   <img src="image.png" />
</div>

Answer 1

使用鼠标的 clientX 和 clientY 位置，并将图像的 top 和 left 样式位置设置为这些位置。

<a href="#" onmouseover="interval()">Link</a>

function interval() {
    while (true) {
        setInterval(showImage, 1);
    }
}

function showImage() {

    var x = clientX;
    var y = clientY;
    var image = document.getElementById("hoverimage");
    image.style.left = x;
    image.style.top = y;
 }

一旦您将鼠标悬停在链接上，图像将永远每毫秒移动一次到鼠标的位置。