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位置，并将该坐标添加到创建的图像中

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

2 个答案: