我对 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;
}
最佳答案
如果我对问题的理解正确,您需要将 position:relative;
放在父 Div 中:图像所在的 #popup
。
检查此 Fiddle 以供引用:https://jsfiddle.net/rjschie/q87um7wd/2/
例如:在#popup 下注释position:relative;
行并重新运行该示例。您会看到图像出现在窗口的顶部。然后取消注释并重新运行,它将相对于 #popup div 出现。
关于html - 将鼠标悬停在文本上时会出现图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35962955/