html - 将鼠标悬停在文本上时会出现图像

Question

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

希望在将鼠标悬停在文本上时显示图像。我可以让图像出现在悬停时，但它出现在页面顶部，我很难让它出现在视口(viewport)中而不指示顶部边距是多少。这是最好的方法吗？

到目前为止我有:

    <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 span {
    display: none;
    }

    #popup a:hover span {
    display: block;
    position: absolute;
    top: 0px;
    left: 170px;
    width: 400px;
    margin: auto;
    }

    #bristol {
    position: absolute;
    z-index: 1;
    margin-top: 100px;
    }

Answer 1

如果我对问题的理解正确，您需要将 position:relative; 放在父 Div 中:图像所在的 #popup。

检查此 Fiddle 以供引用:https://jsfiddle.net/rjschie/q87um7wd/2/

例如:在#popup 下注释position:relative; 行并重新运行该示例。您会看到图像出现在窗口的顶部。然后取消注释并重新运行，它将相对于 #popup div 出现。