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

Question

我对 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 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

请为保存图像的 span 提供相对定位。

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

Answer 2

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

检查此 Fiddle 以供参考：https://jsfiddle.net/rjschie/q87um7wd/2/

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

出现

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

image appears when hover over text

html

css

hover