悬停在元素上时使图像跟随光标

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;
 }

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

Answer 2

有可能的。 将鼠标悬停在某些元素（body，div等）上时，需要获取鼠标的clientX和clientY位置，并将该坐标添加到创建的图像中