javascript - 将鼠标悬停在链接上时在光标位置显示图像

Question

我想实现一个函数，当悬停在图像上时，它将在光标所在的位置打开图像。如何做到这一点？我已经尝试了下面的代码列表，但它似乎不起作用。它使我的网站无响应。有没有办法让这项工作更正常？

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

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

<a href="#" onmouseover="interval()">THIS IS THE LINK</a>

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

标签： javascripthtmlcssweb

Answer 1

尝试这个：

    #imageContainer {
      opacity: 0; # Not visible
    }
    
    #linkWithImage:hover ~ #imageContainer {
      opacity: 1; # Visible
    }
 

    <a id="linkWithImage" href="https://www.breakingbadstore.com/">Link with image</a>
   
    <div id="imageContainer">
        <img src="https://gcdn.emol.cl/mitos-y-enigmas/files/2019/09/breaking-bad.jpg" width="500px"  />
    </div>