Html 将鼠标悬停在文本上时会显示图像

我对JS不太满意，但这似乎是最好的方法，很难将其他人的解决方案应用到我的场景中

希望将鼠标悬停在文本上时显示图像。 我可以让图像显示在悬停状态，但它显示在页面顶部，我很难让它显示在视口中，而不指示上边距是什么。这是最好的方法吗

到目前为止，我已经：

    <div id="popup">
       <div class="large-6 columns">
           <a href="#"> Bristol Hayward-Hughes <span> <img src="bristol.jpg" alt="Bristol" id="bristol"> </span> </a> 
        </div>
    </div>

---

请给出保持图像的跨度的相对位置

#popup a:hover span {
display: block;
position: relative; // Changed absolute to relative
//Give top and left position with respect to your anchor tag.
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}

同时从图像标记中删除页边距顶部

#bristol {
    position: absolute;
    z-index: 1;
    /*margin-top: 100px;*/ //Removed margin-top on the image
    }

---

如果我正确理解了这个问题，您需要放置

位置：relative

位于图像所在的父Div:

#弹出窗口

检查此小提琴以供参考：

---

例如：注释

位置：relative行在#下弹出并重新运行示例。您将看到图像显示在窗口的顶部。然后取消注释并重新运行，它将相对于#popup div.
显示，这将允许
#popup
div中的所有内容相对于自身而不是主体进行定位。现在，您可以在
上使用
位置：绝对
或
位置：相对
（或者如果愿意，可以直接使用
）。
#bristol {
    position: absolute;
    z-index: 1;
    /*margin-top: 100px;*/ //Removed margin-top on the image
    }