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

请对包含图像的范围进行相对定位。

.append("Feeds.paid", "true"));

也从图像标记中删除margin-top。

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

Answer 2

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

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

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

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

2 个答案: