將鼠標懸停在文本上時出現圖像

我對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; 
    }

來源

2016-03-12 Tay Nell

如果我理解正確的問題，你就需要把position:relative;父事業部：#popup該圖像是居住在

檢查這個小提琴供參考：https://jsfiddle.net/rjschie/q87um7wd/2/

例如：在#popup下注釋position:relative;行並重新運行示例。您會看到圖像出現在窗口的頂部。然後取消註釋，然後重新運行，它將出現在＃popup div的相對位置。

來源

2016-03-12 20:51:18

這將允許'＃popup' 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 
    }

來源

2016-03-12 20:45:39 user3613129

將鼠標懸停在文本上時出現圖像

回答

相關問題